import { SaudiRiyal } from "lucide-react";

interface PricingHeaderProps {
  title: string;
  price: string;
  pricePeriod?: string;
  isFeatured?: boolean;
}

export default function PricingHeader({
  title,
  price,
  pricePeriod,
  isFeatured = false,
}: PricingHeaderProps) {
  const currency = <SaudiRiyal className="h-6 h-6 inline" />;

  const titleClasses = isFeatured
    ? "text-[20px] md:text-[24px] px-10 font-bold mb-4"
    : "text-[20px] md:text-[24px] px-10 font-bold text-primary-main mb-4 uppercase";

  const priceClasses = isFeatured
    ? "text-[42px] md:text-[52px] font-bold leading-none"
    : "text-[42px] md:text-[52px] font-bold text-primary-main leading-none";

  const priceBg = isFeatured ? "bg-primary-15" : "bg-primary-16";

  return (
    <>
      <h2 className={titleClasses}>{title}</h2>
      <div className={`px-10 py-5 ${priceBg}`}>
        <div className="flex items-baseline gap-1">
          <span className={priceClasses}>
            {price}{currency}
            {pricePeriod && "/"}
          </span>
          {pricePeriod && (
            <span className="text-[14px] md:text-[24px] text-primary-light font-medium">
              {pricePeriod}
            </span>
          )}
        </div>
      </div>
    </>
  );
}