components/halves/TastingNote.tsx

import type { ReactNode } from "react";

export function TastingNote({
  title,
  origin,
  children,
  serve,
}: {
  title: string;
  origin: string;
  children: ReactNode;
  serve?: string;
}) {
  return (
    <article className="tasting-note">
      <header>
        <span>From the case</span>
        <span>375 ml</span>
      </header>
      <h3>{title}</h3>
      <p className="tasting-note__origin">{origin}</p>
      <div className="tasting-note__copy">{children}</div>
      {serve ? <footer>At the table: {serve}</footer> : null}
    </article>
  );
}