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

interface ProgressToSeeSoulmateProps
  extends Omit<React.ComponentProps<"div">, "title"> {
  title: TypographyProps<"h3">;
  progress: React.ComponentProps<typeof Progress>;
  progressText?: {
    leftText?: TypographyProps<"span">;
    rightText?: TypographyProps<"span">;
  };
}

export default function ProgressToSeeSoulmate({
  title,
  progress,
  progressText,
  ...props
}: ProgressToSeeSoulmateProps) {
  return (
    <div {...props} className={cn("w-full", props.className)}>
      {title && (
        <Typography
          as="h3"
          weight="bold"
          font="inter"
          align="center"
          {...title}
          className={cn(
            "text-[22px]/[28px] text-trial-payment-foreground",
            title.className
          )}
        />
      )}
      <div className="mt-7 flex flex-col gap-2">
        {progressText && (
          <div className="w-full flex items-center justify-between">
            {progressText.leftText && (
              <Typography
                as="span"
                size="sm"
                font="inter"
                weight="medium"
                {...progressText.leftText}
                className={cn(
                  "text-[#1047A2] leading-[20px]",
                  progressText.leftText.className
                )}
              />
            )}
            {progressText.rightText && (
              <Typography
                as="span"
                size="sm"
                font="inter"
                {...progressText.rightText}
                className={cn(
                  "text-[#6B7280] leading-[20px]",
                  progressText.rightText.className
                )}
              />
            )}
          </div>
        )}
        {progress && (
          <Progress
            {...progress}
            classNameProgressContainer={cn(
              "h-2 [&>div]:bg-[#1047A2]",
              progress.classNameProgressContainer
            )}
          />
        )}
      </div>
    </div>
  );
}
