import { ScrollArea, ScrollBar } from './scroll-area'
import { Meta, type StoryObj } from '@storybook/react-vite'

const meta: Meta<typeof ScrollArea> = {
  title: 'Scroll Area',
  component: ScrollArea,
  tags: ['autodocs'],
}
export default meta

type Artwork = {
  artist: string
  art: string
}

const works: Artwork[] = [
  {
    artist: 'Ornella Binni',
    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
  },
  {
    artist: 'Tom Byrom',
    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
  },
  {
    artist: 'Vladimir Malyavko',
    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
  },
]

export const Default: StoryObj<typeof meta> = {
  render: (args) => (
    <div className="flex items-center justify-center">
      <ScrollArea className="w-[400px] whitespace-nowrap rounded-md border">
        <div className="flex w-max space-x-4 p-4 ">
          {works.map((artwork) => (
            <figure key={artwork.artist} className="shrink-0">
              <div className="overflow-hidden rounded-md">
                <img
                  src={artwork.art}
                  alt={`Photo by ${artwork.artist}`}
                  className="aspect-[3/4] h-[200px] object-cover"
                />
              </div>
              <figcaption className="pt-2 text-xs text-muted-foreground">
                Photo by <span className="font-semibold text-foreground">{artwork.artist}</span>
              </figcaption>
            </figure>
          ))}
        </div>
        <ScrollBar orientation="horizontal" />
      </ScrollArea>
    </div>
  ),
}
