"use client";

import { CurrencyYenIcon } from "@heroicons/react/24/outline";

interface CardPricingProps {
  monthlyPrice?: number | null;
  oneTimePrice?: number | null;
  size?: "sm" | "md" | "lg";
  alignment?: "left" | "right";
}

export function CardPricing({
  monthlyPrice,
  oneTimePrice,
  size = "md",
  alignment = "right",
}: CardPricingProps) {
  const sizeClasses = {
    sm: {
      monthlyPrice: "text-xl",
      monthlyLabel: "text-xs",
      icon: "h-5 w-5",
      oneTimePrice: "text-sm",
      oneTimeLabel: "text-xs",
    },
    md: {
      monthlyPrice: "text-2xl",
      monthlyLabel: "text-sm",
      icon: "h-6 w-6",
      oneTimePrice: "text-base",
      oneTimeLabel: "text-xs",
    },
    lg: {
      monthlyPrice: "text-3xl",
      monthlyLabel: "text-base",
      icon: "h-7 w-7",
      oneTimePrice: "text-lg",
      oneTimeLabel: "text-sm",
    },
  };

  const alignClass = alignment === "right" ? "text-right" : "text-left";
  const justifyClass = alignment === "right" ? "justify-end" : "justify-start";

  if (!monthlyPrice && !oneTimePrice) {
    return null;
  }

  const classes = sizeClasses[size];

  return (
    <div className={`flex-shrink-0 ${alignClass}`}>
      {monthlyPrice && monthlyPrice > 0 && (
        <div className={`flex items-baseline gap-1 ${justifyClass}`}>
          <CurrencyYenIcon className={`${classes.icon} text-gray-600`} />
          <span className={`${classes.monthlyPrice} font-bold text-gray-900`}>
            {monthlyPrice.toLocaleString()}
          </span>
          <span className={`${classes.monthlyLabel} text-gray-500 font-normal`}>/month</span>
        </div>
      )}
      {oneTimePrice && oneTimePrice > 0 && (
        <div className={`flex items-baseline gap-1 ${justifyClass} ${monthlyPrice ? "mt-1" : ""}`}>
          <CurrencyYenIcon className={`h-4 w-4 text-orange-600`} />
          <span className={`${classes.oneTimePrice} font-semibold text-orange-600`}>
            {oneTimePrice.toLocaleString()}
          </span>
          <span className={`${classes.oneTimeLabel} text-orange-500`}>one-time</span>
        </div>
      )}
    </div>
  );
}
