import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { cn } from "@/lib/utils";

interface StepToSeeSoulmateProps
  extends Omit<React.ComponentProps<"div">, "title"> {
  title: TypographyProps<"h4">;
  description: TypographyProps<"p">;
  icon: React.ReactNode;
  isActive: boolean;
}

export default function StepToSeeSoulmate({
  title,
  description,
  icon,
  isActive,
  ...props
}: StepToSeeSoulmateProps) {
  return (
    <div
      {...props}
      className={cn("w-full flex items-center gap-4", props.className)}
    >
      <div
        className={cn(
          "z-1",
          "size-12",
          "rounded-full",
          "flex items-center justify-center shrink-0",
          "border-4 border-trial-payment-border-secondary",
          "bg-background shadow-trial-payment-step-inactive",
          isActive && "bg-[#1047A2]",
          isActive && "border-border-white",
          isActive && "shadow-trial-payment-step-active"
        )}
      >
        {icon}
      </div>
      <div className="flex flex-col gap-1">
        <Typography
          as="h4"
          weight="semiBold"
          font="inter"
          size="sm"
          {...title}
          className={cn("text-[#1047A2] leading-[20px]", title.className)}
        />
        <Typography
          as="p"
          font="inter"
          size="xs"
          {...description}
          className={cn("leading-[16px] text-[#6B7280]", description.className)}
        />
      </div>
    </div>
  );
}
