import { FC } from 'react';
import { Group } from '@/components/ui/group';
import { Stack } from '@/components/ui/stack';
import { twx } from '@/utils';

type StepSet = {
  title: string;
  description: string;
};

type StepsProps = {
  current: number;
  onChange: (id: number) => void;
  stepSets: StepSet[];
};

export const StepsBar: FC<StepsProps> = ({ current, onChange, stepSets }) => {
  const onClickEvent = (index: number) => {
    if (current <= index) return;
    onChange(index);
  };
  return (
    <Group className="w-full bg-white">
      {stepSets.map((node, index) => {
        const step = index + 1;
        return (
          <Group
            key={`step_${index}`}
            className={twx([
              'items-center',
              current <= index ? 'cursor-default' : 'cursor-pointer',
            ])}
            onClick={() => onClickEvent(index)}
          >
            {index !== 0 && (
              <Stack className="mx-4 w-20 justify-center">
                <div
                  className={twx(
                    'w-full border',
                    index > current ? 'border-zinc-400' : ' border-blue',
                  )}
                />
              </Stack>
            )}
            <Group className="gap-2 p-4">
              <div
                className={twx([
                  'h-8 w-8 flex items-center justify-center rounded-full border border-zinc-400 text-white',
                  current > index
                    ? 'border-blue'
                    : current === index
                      ? 'bg-blue border-blue'
                      : '',
                ])}
              >
                {current > index ? (
                  <div className="i-ant-design-check-outlined text-blue" />
                ) : (
                  <p
                    className={twx(
                      current === index ? 'text-white' : 'text-zinc-400',
                    )}
                  >
                    {step}
                  </p>
                )}
              </div>
              <Stack className="justify-center text-sm text-zinc-400 dark:text-zinc-700">
                <p
                  className={twx([
                    current >= index ? 'dark:text-white text-black/90' : '',
                  ])}
                >
                  {node.title}
                </p>
                <p
                  className={twx([
                    current === index ? 'dark:text-white text-black/90' : '',
                  ])}
                >
                  {node.description}
                </p>
              </Stack>
            </Group>
          </Group>
        );
      })}
    </Group>
  );
};
