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

interface TotalPriceProps extends Omit<React.ComponentProps<"div">, "title"> {
  couponContainer: {
    title?: TypographyProps<"h4">;
    button?: React.ComponentProps<typeof Button>;
  };
  priceContainer?: {
    title?: TypographyProps<"h4">;
    price?: TypographyProps<"span">;
    oldPrice?: TypographyProps<"span">;
    discount?: TypographyProps<"span">;
  };
}

export default function TotalPrice({
  couponContainer,
  priceContainer,
  ...props
}: TotalPriceProps) {
  return (
    <Card {...props} className={cn("border-2 p-[22px]", props.className)}>
      {couponContainer && (
        <div className="w-full flex items-center justify-between">
          {couponContainer.title && (
            <Typography
              as="h4"
              font="inter"
              weight="semiBold"
              {...couponContainer.title}
              className={cn(
                "text-trial-payment-foreground leading-[24px]",
                couponContainer.title.className
              )}
            />
          )}
          {couponContainer.button && (
            <Button
              {...couponContainer.button}
              className={cn(
                "py-2 px-[15px]",
                "font-inter font-bold text-foreground!",
                "bg-gradient-to-r from-[#FCD34D] to-[#F59E0B]",
                "rounded-[8px]",
                "flex items-center gap-6",
                couponContainer.button.className
              )}
            >
              {couponContainer.button.children}
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16ZM11.5312 6.53125L7.53125 10.5312C7.2375 10.825 6.7625 10.825 6.47188 10.5312L4.47188 8.53125C4.17813 8.2375 4.17813 7.7625 4.47188 7.47188C4.76562 7.18125 5.24062 7.17813 5.53125 7.47188L7 8.94063L10.4688 5.46875C10.7625 5.175 11.2375 5.175 11.5281 5.46875C11.8187 5.7625 11.8219 6.2375 11.5281 6.52812L11.5312 6.53125Z"
                  fill="white"
                />
              </svg>
            </Button>
          )}
        </div>
      )}
      {priceContainer && (
        <div className="w-full flex items-center justify-between mt-5">
          {priceContainer.title && (
            <Typography
              as="h4"
              font="inter"
              weight="bold"
              size="xl"
              {...priceContainer.title}
              className={cn(
                "text-trial-payment-foreground leading-[28px]",
                priceContainer.title.className
              )}
            />
          )}
          <div className="flex flex-col items-end gap-1">
            <div className="flex items-center gap-3.5">
              {priceContainer.oldPrice && (
                <Typography
                  as="span"
                  font="inter"
                  {...priceContainer.oldPrice}
                  className={cn(
                    "text-[#6B7280] text-[18px]/[28px] line-through",
                    priceContainer.oldPrice.className
                  )}
                />
              )}
              {priceContainer.price && (
                <Typography
                  as="span"
                  font="inter"
                  weight="black"
                  {...priceContainer.price}
                  className={cn(
                    "text-trial-payment-foreground text-[30px]/[36px]",
                    priceContainer.price.className
                  )}
                />
              )}
            </div>
            {priceContainer.discount && (
              <Typography
                as="span"
                size="sm"
                font="inter"
                weight="bold"
                {...priceContainer.discount}
                className={cn(
                  "block bg-[#A162071A] rounded-[6px] px-4 pr-[5px] py-1",
                  "text-[#A16207]",
                  priceContainer.discount.className
                )}
              />
            )}
          </div>
        </div>
      )}
    </Card>
  );
}
