Carousel

function CarouselDemo() {
  const threats = [
    { name: "Phishing kits", count: 18 },
    { name: "Lookalike domains", count: 42 },
    { name: "Leaked credentials", count: 7 },
    { name: "Exposed services", count: 23 },
    { name: "Fake social profiles", count: 5 },
  ]

  return (
    <Carousel aria-label="Threats this week" className="w-full max-w-xs">
      <CarouselContent>
        {threats.map((threat, index) => (
          <CarouselItem
            key={threat.name}
            aria-label={`${index + 1} of ${threats.length}`}
          >
            <Card>
              <CardContent className="flex aspect-video flex-col items-center justify-center gap-1">
                <span className="text-xl font-semibold text-text-primary">
                  {threat.count}
                </span>
                <span className="text-sm text-text-secondary">
                  {threat.name}
                </span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

function CarouselMultiple() {
  const reports = [
    "Weekly exposure",
    "Monthly exposure",
    "Brand abuse",
    "Takedown status",
    "Executive summary",
    "Vulnerability trends",
  ]

  return (
    <Carousel
      aria-label="Report templates"
      opts={{ align: "start" }}
      className="w-full max-w-md"
    >
      <CarouselContent>
        {reports.map((report, index) => (
          <CarouselItem
            key={report}
            aria-label={`${index + 1} of ${reports.length}`}
            className="basis-1/2 sm:basis-1/3"
          >
            <Card>
              <CardContent className="flex aspect-square items-center justify-center text-center text-sm font-medium text-text-primary">
                {report}
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

function CarouselWithApi() {
  const [api, setApi] = React.useState<CarouselApi>()
  const [current, setCurrent] = React.useState(0)
  const captures = [
    "21 Oct, 09:14",
    "21 Oct, 15:40",
    "22 Oct, 08:02",
    "23 Oct, 11:27",
  ]

  React.useEffect(() => {
    if (!api) return
    const onSelect = () => setCurrent(api.selectedScrollSnap())
    api.on("select", onSelect)
    return () => {
      api.off("select", onSelect)
    }
  }, [api])

  return (
    <div className="flex w-full max-w-xs flex-col items-center gap-2">
      <Carousel
        aria-label="Screenshots of acme-login.co"
        setApi={setApi}
        className="w-full"
      >
        <CarouselContent>
          {captures.map((capture, index) => (
            <CarouselItem
              key={capture}
              aria-label={`${index + 1} of ${captures.length}`}
            >
              <Card>
                <CardContent className="flex aspect-video items-center justify-center text-sm text-text-secondary">
                  Captured {capture}
                </CardContent>
              </Card>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
      <span className="text-sm text-text-muted" aria-live="polite">
        Screenshot {current + 1} of {captures.length}
      </span>
    </div>
  )
}