components/halves/WineCard.tsx

import { Tag } from "./Tag";

export function WineCard({
  index,
  producer,
  wine,
  origin,
  detail,
  tone,
  allocation,
}: {
  index: number;
  producer: string;
  wine: string;
  origin: string;
  detail: string;
  tone: "red" | "white" | "rose" | "sparkling";
  allocation?: string;
}) {
  return (
    <article className="wine-card">
      <span className="wine-card__number">{String(index).padStart(2, "0")}</span>
      <div className="wine-card__name">
        <p>{producer}</p>
        <h3>{wine}</h3>
      </div>
      <div className="wine-card__facts">
        <span>{origin}</span>
        <span>{detail}</span>
      </div>
      <div className="wine-card__end">
        <Tag tone={tone}>{tone}</Tag>
        {allocation ? <span>{allocation}</span> : null}
      </div>
    </article>
  );
}