1  import type { Meta, StoryObj } from '@storybook/react'
  2  import { SongStatsItem } from './SongStatsItem'
  3  
  4  const meta: Meta<typeof SongStatsItem> = {
  5    title: 'Components/SongStatsItem',
  6    component: SongStatsItem,
  7    parameters: {
  8      layout: 'padded',
  9      backgrounds: {
 10        default: 'dark',
 11      },
 12    },
 13    argTypes: {
 14      title: {
 15        control: 'text',
 16        description: 'Song title',
 17      },
 18      artist: {
 19        control: 'text',
 20        description: 'Artist name',
 21      },
 22      dueCount: {
 23        control: 'number',
 24        description: 'Number of due cards',
 25      },
 26      onClick: { action: 'clicked' },
 27    },
 28  }
 29  
 30  export default meta
 31  type Story = StoryObj<typeof SongStatsItem>
 32  
 33  export const Default: Story = {
 34    args: {
 35      title: 'All My Life',
 36      artist: 'Lil Durk ft. J. Cole',
 37      thumbnail: 'https://picsum.photos/200',
 38      dueCount: 2,
 39    },
 40  }
 41  
 42  export const NoStats: Story = {
 43    args: {
 44      title: 'Flowers',
 45      artist: 'Miley Cyrus',
 46      thumbnail: 'https://picsum.photos/201',
 47      dueCount: 0,
 48    },
 49  }
 50  
 51  export const OnlyNewCards: Story = {
 52    args: {
 53      title: 'As It Was',
 54      artist: 'Harry Styles',
 55      thumbnail: 'https://picsum.photos/202',
 56      dueCount: 0,
 57    },
 58  }
 59  
 60  export const OnlyDueCards: Story = {
 61    args: {
 62      title: 'Anti-Hero',
 63      artist: 'Taylor Swift',
 64      thumbnail: 'https://picsum.photos/203',
 65      dueCount: 8,
 66    },
 67  }
 68  
 69  export const HighNumbers: Story = {
 70    args: {
 71      title: 'Unholy',
 72      artist: 'Sam Smith & Kim Petras',
 73      thumbnail: 'https://picsum.photos/204',
 74      dueCount: 42,
 75    },
 76  }
 77  
 78  export const NoThumbnail: Story = {
 79    args: {
 80      title: 'Heat Waves',
 81      artist: 'Glass Animals',
 82      dueCount: 1,
 83    },
 84  }
 85  
 86  export const LongTitles: Story = {
 87    args: {
 88      title: 'This Is A Very Long Song Title That Should Be Truncated',
 89      artist: 'Artist With An Extremely Long Name That Should Also Be Truncated',
 90      thumbnail: 'https://picsum.photos/205',
 91      dueCount: 9,
 92    },
 93  }
 94  
 95  export const MySongsList: Story = {
 96    render: () => (
 97      <div className="space-y-2 max-w-2xl">
 98        <h2 className="text-lg font-semibold text-white mb-3">My Songs</h2>
 99        <SongStatsItem
100          title="Flowers"
101          artist="Miley Cyrus"
102          thumbnail="https://picsum.photos/206"
103          dueCount={0}
104        />
105        <SongStatsItem
106          title="As It Was"
107          artist="Harry Styles"
108          thumbnail="https://picsum.photos/207"
109          dueCount={3}
110        />
111        <SongStatsItem
112          title="Anti-Hero"
113          artist="Taylor Swift"
114          thumbnail="https://picsum.photos/208"
115          dueCount={15}
116        />
117        <SongStatsItem
118          title="Unholy"
119          artist="Sam Smith & Kim Petras"
120          thumbnail="https://picsum.photos/209"
121          dueCount={0}
122        />
123      </div>
124    ),
125  }