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

interface MoneyBackGuaranteeProps
  extends Omit<React.ComponentProps<"div">, "title"> {
  title?: TypographyProps<"h4">;
  text?: TypographyProps<"p">;
  icon?: React.ReactNode;
}

export default function MoneyBackGuarantee({
  title,
  text,
  icon,
  ...props
}: MoneyBackGuaranteeProps) {
  return (
    <div
      {...props}
      className={cn(
        "w-full max-w-[316px]",
        "flex items-center justify-center gap-3",
        props.className
      )}
    >
      {icon ? (
        icon
      ) : (
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="flex-shrink-0"
        >
          <g clipPath="url(#clip0_49_137)">
            <path
              d="M12 0C12.2156 0 12.4313 0.046875 12.6281 0.135938L21.4547 3.88125C22.486 4.31719 23.2547 5.33438 23.25 6.5625C23.2266 11.2125 21.3141 19.7203 13.2375 23.5875C12.4547 23.9625 11.5453 23.9625 10.7625 23.5875C2.68596 19.7203 0.773459 11.2125 0.750021 6.5625C0.745334 5.33438 1.51408 4.31719 2.54533 3.88125L11.3766 0.135938C11.5688 0.046875 11.7844 0 12 0ZM12 3.13125V20.85C18.4688 17.7188 20.2078 10.7859 20.25 6.62813L12 3.13125Z"
              fill="#3B82F6"
            />
          </g>
          <defs>
            <clipPath id="clip0_49_137">
              <path d="M0 0H24V24H0V0Z" fill="white" />
            </clipPath>
          </defs>
        </svg>
      )}
      <div className="flex flex-col items-start">
        {title && (
          <Typography
            as="h4"
            weight="bold"
            font="inter"
            size="sm"
            {...title}
            className={cn(
              "leading-[20px] text-trial-payment-foreground",
              title.className
            )}
          />
        )}
        {text && (
          <Typography
            as="p"
            weight="medium"
            font="inter"
            size="xs"
            {...text}
            className={cn("leading-[16px] text-[#6B7280]", text.className)}
          />
        )}
      </div>
    </div>
  );
}
