import { cn } from "@/lib/utils";
import StepToSeeSoulmate from "./StepToSeeSoulmate";
import { ActionButton } from "@/components/ui/ActionButton/ActionButton";

interface StepsToSeeSoulmateProps extends React.ComponentProps<"div"> {
  steps: React.ComponentProps<typeof StepToSeeSoulmate>[];
  button?: React.ComponentProps<typeof ActionButton>;
}

export default function StepsToSeeSoulmate({
  steps,
  button,
  ...props
}: StepsToSeeSoulmateProps) {
  return (
    <div
      {...props}
      className={cn("w-full flex flex-col gap-6", props.className)}
    >
      <div className={cn("relative w-full flex flex-col gap-6")}>
        {steps.map((step, index) => (
          <StepToSeeSoulmate key={index} {...step} />
        ))}
        <div className="absolute top-12 left-[23px] w-0.5 h-[calc(100%-96px)] bg-gradient-to-b from-[#1047A2] to-[#FFFFFF]" />
      </div>
      {button && (
        <ActionButton
          {...button}
          className={cn(
            "text-[18px] font-medium animate-scale-pulse",
            button.className
          )}
        />
      )}
    </div>
  );
}
