import { Box, Group } from "@mantine/core";
import { memo } from "react";

interface StepperProps {
  stage: number;
  color: string;
}

export const Stepper = memo(function Stepper({ stage, color }: StepperProps) {
  return (
    <Group gap={0} align="center" wrap="nowrap" className="h-3.5 w-full">
      {[0, 1, 2, 3, 4].map((i) => {
        const done = i < stage;
        const active = i === stage;
        const size = active ? 12 : done ? 9 : 8;
        return (
          <Group
            key={i}
            gap={0}
            align="center"
            wrap="nowrap"
            className={i < 4 ? "flex-1" : undefined}
          >
            <Box
              w={size}
              h={size}
              bg={done || active ? color : "edr-step-idle"}
              className="shrink-0 rounded-full"
            />
            {i < 4 && (
              <Box
                h={3}
                bg={i < stage ? color : "edr-conn-idle"}
                className="flex-1 rounded-full"
              />
            )}
          </Group>
        );
      })}
    </Group>
  );
});
