import { CoverMedia } from "@/registry/ui/cover-media"

// Distinct slugs, so the generated row shows the seed actually varying the
// gradient and the glyph rather than repeating one cover six times.
const SEEDS = [
  "designing-user-centric-services",
  "intro-to-digital-government",
  "tax-simplification",
  "kenya-eregistrations",
  "benin-means-business",
  "lesotho-business-registration",
]

export default function CoverMediaDemo() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-2">
        <p className="text-footnote text-muted-foreground">
          With a photograph — cropped to <code>--cover-aspect</code>.
        </p>
        <CoverMedia
          src="/photos/scrim-demo.jpg"
          alt=""
          seed="with-photo"
          className="max-w-md rounded-xl"
        />
      </div>

      <div className="flex flex-col gap-2">
        <p className="text-footnote text-muted-foreground">
          Without one — a cover derived from the seed alone, so the same slug
          always renders the same gradient and glyph. Photography is an
          enhancement; a catalogue with no images still looks intentional.
        </p>
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
          {SEEDS.map((seed) => (
            <CoverMedia key={seed} seed={seed} className="rounded-lg" />
          ))}
        </div>
      </div>
    </div>
  )
}