Menu Teaser

/**
 * VibeBox Motion · Menu Teaser
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { Container, headingId, Media, REVEAL, Section, SectionHead, SlotText, TextLink, type BlockProps } from "@/lib/vibebox/block-kit";
import type { Image } from "@/lib/vibebox/content";
import { cn } from "@/lib/utils";
import type { Content, Variant } from "./schema";

/*
 * A taste of the menu or catalogue: names with a line each and prices the business sets, as a
 * two-column menu with dotted leaders or as cards with images.
 */

const FALLBACK_SCENES = ["vase", "archway", "hills", "tiles"] as const;

export type MenuTeaserProps = BlockProps<Content, Variant>;

export function MenuTeaser({ content, variant = "list", id, tone, className }: MenuTeaserProps) {
  const cards = variant === "cards";
  return (
    <Section slug="menu-teaser" variant={variant} id={id} tone={tone} labelledBy={headingId(id)} className={className}>
      <Container className="grid gap-[clamp(32px,4vw,56px)]">
        <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
          <SectionHead eyebrow={content.eyebrow} heading={content.heading} lead={content.lead} id={id} />
          {content.action && <TextLink link={content.action} path="action" className="justify-self-start lg:justify-self-end" />}
        </div>
        {cards ? (
          <ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {content.items.map((item, index) => {
              const fallback: Image = { src: `scene:${FALLBACK_SCENES[index % FALLBACK_SCENES.length]}:${index % 10}`, alt: "", width: 1200, height: 900 };
              return (
                <li key={index} className={cn("grid content-start overflow-hidden rounded-xl bg-card text-card-foreground ring-1 ring-border", REVEAL)}>
                  <div className="aspect-[4/3]">
                    <Media image={item.media ?? fallback} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" />
                  </div>
                  <div className="grid gap-2 p-5">
                    <div className="flex items-baseline justify-between gap-4">
                      <SlotText as="h3" value={item.name} path={`items.${index}.name`} className="min-w-0 font-semibold tracking-tight" />
                      <SlotText value={item.price} path={`items.${index}.price`} className="shrink-0 font-medium tabular-nums" />
                    </div>
                    <SlotText as="p" value={item.description} path={`items.${index}.description`} className="text-small text-pretty text-muted-foreground" />
                    {item.tag && (
                      <SlotText value={item.tag} path={`items.${index}.tag`} className="justify-self-start rounded-full bg-muted px-2.5 py-0.5 text-caption font-medium" />
                    )}
                  </div>
                </li>
              );
            })}
          </ul>
        ) : (
          <ul className="grid gap-x-14 gap-y-7 md:grid-cols-2">
            {content.items.map((item, index) => (
              <li key={index} className={cn("grid gap-1.5", REVEAL)}>
                <div className="flex items-baseline gap-3">
                  <SlotText as="h3" value={item.name} path={`items.${index}.name`} className="min-w-0 text-[1.1rem] font-semibold tracking-tight" />
                  {item.tag && <SlotText value={item.tag} path={`items.${index}.tag`} className="shrink-0 rounded-full bg-muted px-2 py-px text-caption font-medium" />}
                  <span aria-hidden="true" className="min-w-6 flex-1 translate-y-[-4px] border-b border-dotted border-border-strong" />
                  <SlotText value={item.price} path={`items.${index}.price`} className="shrink-0 font-medium tabular-nums" />
                </div>
                <SlotText as="p" value={item.description} path={`items.${index}.description`} className="text-small text-pretty text-muted-foreground" />
              </li>
            ))}
          </ul>
        )}
      </Container>
    </Section>
  );
}

/**
 * VibeBox Motion · Menu Teaser
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { sections, type z } from "@/lib/vibebox/content";

export const variants = ["list", "cards"] as const;

export type Variant = (typeof variants)[number];

export const content = sections.menu;

export type Content = z.infer<typeof content>;