Card

import { ArrowRight, MoreHorizontal } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardMedia,
  CardTitle,
} from "@/components/ui/card";

/**
 * Live Card example — Card is a server component (no client JS). Shows the
 * minimum valid Card (container + Content), the full optional anatomy (Media →
 * Header with a trailing CardAction → Content → Footer), the `compact` density,
 * and whole-card navigation (`href`) with its hover + `:focus-visible`
 * treatment.
 *
 * The full-anatomy card is deliberately NOT interactive — it holds nested
 * controls (the action icon-button, the footer buttons), so per card.md the
 * container itself is never a link; the whole-card `href` card carries no
 * nested interactive descendants.
 */
export function CardShowcase() {
  return (
    <div className="flex flex-col gap-8">
      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Minimum — container + Content
        </h3>
        <Card className="max-w-sm">
          <CardContent>
            A bordered box around arbitrary content. Media, Header, and Footer
            are added only when an instance needs them.
          </CardContent>
        </Card>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Full anatomy (non-interactive)
        </h3>
        <Card className="max-w-sm">
          <CardMedia>
            <div className="aspect-[16/9] w-full bg-muted" />
          </CardMedia>
          <CardHeader>
            <CardTitle>Weekly report</CardTitle>
            <CardDescription>
              Generated every Monday from the last seven days of activity.
            </CardDescription>
            <CardAction>
              <Button size="icon" variant="ghost" aria-label="Report options">
                <MoreHorizontal />
              </Button>
            </CardAction>
          </CardHeader>
          <CardContent>
            42 events across 6 projects. Two items need review before the report
            can be shared with the team.
          </CardContent>
          <CardFooter className="justify-end">
            <Button variant="ghost">Dismiss</Button>
            <Button>Review</Button>
          </CardFooter>
        </Card>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Compact density
        </h3>
        <div className="flex max-w-sm flex-col gap-3">
          {["Design system", "Task tracker", "Marketing site"].map((name) => (
            <Card key={name} density="compact">
              <CardContent className="flex items-center justify-between gap-3">
                <span className="text-sm font-medium leading-snug">{name}</span>
                <span className="text-sm leading-normal text-muted-foreground">
                  Updated today
                </span>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Whole-card navigation
        </h3>
        <Card href="#card-showcase" className="max-w-sm">
          <CardHeader>
            <CardTitle>Getting started guide</CardTitle>
            <CardDescription>
              The whole surface is one native link — no nested interactive
              descendants. Hover shifts the border; keyboard focus shows the
              ring.
            </CardDescription>
          </CardHeader>
          <CardContent className="flex items-center gap-1 text-sm font-medium leading-snug">
            Read the guide
            <ArrowRight className="size-4 [stroke-width:var(--icon-stroke-width)]" />
          </CardContent>
        </Card>
      </section>
    </div>
  );
}