const BANNERS: Record<string, string> = {
  phoenix:
    'M0 48 L120 48 L120 0 Q90 24 60 8 Q30 24 0 0 Z',
  'complete-credential':
    'M0 48 L120 48 L120 0 L96 16 L72 0 L48 20 L24 0 L0 16 Z',
  studio:
    'M0 48 L120 48 L120 0 C100 32 80 12 60 28 C40 12 20 32 0 0 Z',
  blockchain:
    'M0 48 L120 48 L120 0 L100 12 L80 0 L60 16 L40 0 L20 12 L0 0 Z',
  identity:
    'M0 48 L120 48 L120 0 Q60 36 0 0 Z',
  treasury:
    'M0 48 L120 48 L120 0 L0 24 Z',
};

export function ProductCardBanner({ productId }: { productId: string }) {
  const d = BANNERS[productId] ?? BANNERS.phoenix;

  return (
    <div className="-mx-6 -mt-6 mb-4 overflow-hidden rounded-t-2xl" aria-hidden>
      <svg viewBox="0 0 120 48" className="h-12 w-full" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id={`banner-${productId}`} x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#D4A64A" stopOpacity="0.35" />
            <stop offset="100%" stopColor="#8B6A3E" stopOpacity="0.15" />
          </linearGradient>
        </defs>
        <path d={d} fill={`url(#banner-${productId})`} />
        <path d={d} fill="none" stroke="#D4A64A" strokeOpacity="0.2" strokeWidth="0.5" />
      </svg>
    </div>
  );
}
