Carousel

import Image from "next/image"
import { Carousel } from "@/components/ui/carousel"

const studies = [
  { id: "harbour", src: "/media/harbour.svg", title: "Harbour study", note: "Cool shadows, one warm accent." },
  { id: "terrace", src: "/media/terrace.svg", title: "Terrace study", note: "Repeating arches at three depths." },
  { id: "ridge", src: "/media/ridge.svg", title: "Ridge study", note: "Layered hills with a low sun." },
];

const slides = [
  ...studies.map((s) => ({
    id: s.id,
    label: s.title,
    content: (
      <article className="overflow-hidden rounded-overlay border border-border">
        <Image src={s.src} alt={`${s.title} illustration`} width={800} height={600} className="aspect-[4/3] w-full object-cover" draggable={false} />
        <div className="p-3">
          <h4 className="text-sm font-medium">{s.title}</h4>
          <p className="mt-1 text-xs text-muted-foreground">{s.note}</p>
        </div>
      </article>
    ),
  })),
  ...["Palette", "Grid", "Type"].map((t, i) => ({
    id: `note-${i}`,
    label: `${t} notes`,
    content: (
      <article className="grid h-full content-between gap-6 rounded-overlay border border-border bg-surface p-4">
        <h4 className="text-sm font-medium">{t} notes</h4>
        <p className="text-sm text-muted-foreground">{["Six categorical colors, quieter in light mode.", "Eight-point grid with a 4-point half step.", "Two weights. Size does the rest."][i]}</p>
      </article>
    ),
  })),
];

export function CarouselDemo() {
  return (
    <Carousel label="Illustration studies" items={slides} />
  );
}