import type { Meta, StoryObj } from '@storybook/react';

import Filmstrip, { FilmstripProps } from './Filmstrip';

type PagePropsAndCustomArgs = FilmstripProps;

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/Filmstrip',
  component: Filmstrip,
};

export default meta;
type Story = StoryObj<PagePropsAndCustomArgs>;

export const Test: Story = {
  args: {
    className: 'w-full h-20 bg-background-tertiary',
    src: '/filmstrip-test.png',
    thumbnailColumns: 5,
    thumbnailRows: 2,
    thumbnailWidth: 1000 / 5,
    thumbnailHeight: 600 / 2,
    thumbnailCount: 9,
  },
};

export const VideoThumbnails: Story = {
  args: {
    className: 'w-full h-20 bg-background-tertiary',
    src: 'https://cdn1.suno.ai/video_upload_sprite_de310f1f-739f-47ba-9253-ef9116f95de7.jpeg',
    thumbnailColumns: 8,
    thumbnailRows: 3,
    thumbnailWidth: 180,
    thumbnailHeight: 240,
    thumbnailCount: 21,
  },
};

export const VideoThumbnails2: Story = {
  args: {
    className: 'w-full h-20 bg-background-tertiary',
    src: 'https://cdn1.suno.ai/video_upload_sprite_13a749fe-512d-4f0e-bc03-85335c4bab2f.jpeg',
    thumbnailColumns: 7,
    thumbnailRows: 1,
    thumbnailWidth: 180,
    thumbnailHeight: 240,
    thumbnailCount: 7,
  },
};

export const ThumbnailCount: Story = {
  args: {
    className: 'w-full h-20 bg-background-tertiary',
    src: 'https://cdn1.suno.ai/video_upload_sprite_de310f1f-739f-47ba-9253-ef9116f95de7.jpeg',
    thumbnailColumns: 8,
    thumbnailRows: 3,
    thumbnailWidth: 180,
    thumbnailHeight: 240,
    thumbnailCount: 5,
  },
};