import Link from "next/link";

interface SubscriptionCardProps {
  name: string;
  price: number;
  unit: string;
  href: string;
  isPopular?: boolean;
}

export default function SubscriptionCard({
  name,
  price,
  unit,
  href,
  isPopular = false,
}: SubscriptionCardProps) {
  return (
    <div className={`sub-plan-card${isPopular ? " sub-plan-popular" : ""}`}>
      {isPopular && <span className="sub-plan-badge">Popular</span>}
      <span className="sub-plan-name">{name}</span>
      <span className="sub-plan-price">
        <img className="dirham-icon" src="/assets/dirham-symbol.svg" alt="" />
        <span>{price}</span>
      </span>
      <span className="sub-plan-unit">{unit}</span>
      <Link className="subscribe-pill" href={href}>
        Subscribe
      </Link>
    </div>
  );
}