w-funnel/src/components/widgets/Coupon/Coupon.tsx

"use client";

import { cn } from "@/lib/utils";
import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { Separator } from "@/components/ui/separator";
import { Files } from "lucide-react";

interface CouponProps extends Omit<React.ComponentProps<"div">, "title"> {
  title: TypographyProps<"h3">;
  offer: {
    title?: TypographyProps<"h3">;
    description?: TypographyProps<"p">;
  };
  promoCode?: TypographyProps<"span">;
  footer?: TypographyProps<"p">;
  onCopyPromoCode?: (code: string) => void;
}

function Coupon({
  className,
  title,
  offer,
  promoCode,
  footer,
  onCopyPromoCode,
  ...props
}: CouponProps) {
  return (
    <div
      className={cn(
        "relative",
        "overflow-hidden",
        "w-full max-w-[342px]",
        "px-[32px] pb-3 pt-[34px]",
        "flex flex-col items-center",
        "bg-gradient-to-r from-[#1F2937] to-[#374151]",
        "rounded-3xl",
        "shadow-coupon",
        "**:z-1",
        className
      )}
      {...props}
    >
      <svg
        width="30"
        height="31"
        viewBox="0 0 30 31"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.1621 4.78125L13.2012 8.25H13.125H8.90625C7.61133 8.25 6.5625 7.20117 6.5625 5.90625C6.5625 4.61133 7.61133 3.5625 8.90625 3.5625H9.03516C9.9082 3.5625 10.7227 4.02539 11.1621 4.78125ZM3.75 5.90625C3.75 6.75 3.95508 7.54688 4.3125 8.25H1.875C0.837891 8.25 0 9.08789 0 10.125V13.875C0 14.9121 0.837891 15.75 1.875 15.75H28.125C29.1621 15.75 30 14.9121 30 13.875V10.125C30 9.08789 29.1621 8.25 28.125 8.25H25.6875C26.0449 7.54688 26.25 6.75 26.25 5.90625C26.25 3.05859 23.9414 0.75 21.0938 0.75H20.9648C19.0957 0.75 17.3613 1.74023 16.4121 3.35156L15 5.75977L13.5879 3.35742C12.6387 1.74023 10.9043 0.75 9.03516 0.75H8.90625C6.05859 0.75 3.75 3.05859 3.75 5.90625ZM23.4375 5.90625C23.4375 7.20117 22.3887 8.25 21.0938 8.25H16.875H16.7988L18.8379 4.78125C19.2832 4.02539 20.0918 3.5625 20.9648 3.5625H21.0938C22.3887 3.5625 23.4375 4.61133 23.4375 5.90625ZM1.875 17.625V27.9375C1.875 29.4902 3.13477 30.75 4.6875 30.75H13.125V17.625H1.875ZM16.875 30.75H25.3125C26.8652 30.75 28.125 29.4902 28.125 27.9375V17.625H16.875V30.75Z"
          fill="#FCD34D"
        />
      </svg>
      {title && (
        <Typography
          as="h3"
          size="xl"
          weight="bold"
          color="primary"
          {...title}
          className={cn(title.className, "leading-[140%]")}
        />
      )}
      {offer && (
        <div
          className={cn(
            "w-full",
            "bg-gradient-to-r from-[#FCD34D] to-[#F59E0B]",
            "rounded-2xl",
            "px-5 py-4 mt-3.5"
          )}
        >
          {offer.title && (
            <Typography
              as="h3"
              size="4xl"
              weight="black"
              color="card"
              {...offer.title}
            />
          )}
          {offer.description && (
            <Typography
              as="p"
              weight="semiBold"
              color="card"
              {...offer.description}
              className={cn(
                "text-[17px] leading-[100%]",
                "mt-2",
                offer.description.className
              )}
            />
          )}
        </div>
      )}
      <div
        className={cn(
          "relative overflow-hidden",
          "h-5",
          "mt-[34px] py-2.5 px-8",
          "before:content-[''] before:absolute before:top-[50%] before:left-0 before:size-5 before:bg-[#f8fafc] before:rounded-full before:translate-[-50%]",
          "after:content-[''] after:absolute after:top-[50%] after:right-0 after:size-5 after:bg-[#f8fafc] after:rounded-full after:translate-x-[50%] after:translate-y-[-50%]"
        )}
        style={{ width: "calc(100% + 32px * 2)" }}
      >
        <Separator className="bg-[#4B5563]" decorative />
      </div>
      {promoCode && (
        <div
          className="w-full flex items-center justify-center gap-2 mt2 cursor-pointer"
          onClick={() => onCopyPromoCode?.(promoCode.children as string)}
        >
          <Typography
            size="lg"
            weight="semiBold"
            {...promoCode}
            className={cn(promoCode.className, "text-[#FCD34D]")}
          />
          <Files color="#FCD34D" size={25} />
        </div>
      )}
      {footer && (
        <Typography
          as="p"
          size="sm"
          color="muted"
          {...footer}
          className={cn(footer.className, "w-full mt-1 mb-5 text-[#9CA3AF]")}
        />
      )}

      <div className="absolute right-[-16px] top-[-16px] size-16 rounded-full bg-[#5c594a] z-0!" />
      <div className="absolute left-[-24px] bottom-[-26px] size-20 rounded-full bg-[#24344c] z-0!" />
    </div>
  );
}

export { Coupon };