"use client";

import type { Product } from "@/lib/content";

function ChevronDownIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path d="M19 9l-7 7-7-7" />
    </svg>
  );
}

export default function ProductCard({ 
  p, 
  category, 
  isOpen,
  onToggle 
}: { 
  p: Product; 
  category: 'baguette' | 'malitz' | 'ciabatta';
  isOpen: boolean;
  onToggle: () => void;
}) {
  return (
    <div className="flex flex-col rounded-2xl border border-surface-2 bg-surface transition-colors hover:border-gold/50">
      <button
        onClick={onToggle}
        className="flex w-full items-center justify-between gap-4 p-6 text-left"
      >
        <h3 className="font-display text-lg text-cream">{p.name}</h3>
        <ChevronDownIcon
          className={`h-5 w-5 text-gold transition-transform ${isOpen ? 'rotate-180' : ''}`}
        />
      </button>
      {isOpen && (
        <div className="px-6 pb-6">
          <p className="mt-3 text-center text-sm leading-relaxed text-cream-dim">{p.description}</p>
          {(p.weight || p.dlc || p.gencod) && (
            <div className="mt-4 flex justify-center gap-4 text-xs text-cream-dim/70">
              {p.weight && <span className="rounded-full bg-surface-2 px-3 py-1">{p.weight}</span>}
              {p.dlc && <span className="rounded-full bg-surface-2 px-3 py-1">DLC {p.dlc}</span>}
              {p.gencod && <span className="rounded-full bg-surface-2 px-3 py-1">Gen-code : {p.gencod}</span>}
            </div>
          )}
        </div>
      )}
    </div>
  );
}