veza/apps/web/src/features/player/components/TrackInfo.stories.tsx

import type { Meta, StoryObj } from '@storybook/react-vite';
import { TrackInfo } from './TrackInfo';

const mockTrack = {
    id: '1',
    title: 'Cyberpunk City',
    artist: 'Synth Master',
    cover: 'https://picsum.photos/200',
    album: 'Neon Nights',
    genre: 'Synthwave',
    duration: 180,
    url: 'test.mp3',
};

const meta: Meta<typeof TrackInfo> = {
    title: 'Components/Features/Player/TrackInfo',
    component: TrackInfo,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof TrackInfo>;

export const Default: Story = {
    args: {
        track: mockTrack,
        className: 'w-[300px]',
    },
};

export const NoCover: Story = {
    args: {
        track: { ...mockTrack, cover: undefined },
        className: 'w-[300px]',
    },
};

export const NoMetadata: Story = {
    args: {
        track: mockTrack,
        showMetadata: false,
        className: 'w-[300px]',
    },
};

export const Small: Story = {
    args: {
        track: mockTrack,
        coverSize: 'sm',
        className: 'w-[300px]',
    },
};

export const Large: Story = {
    args: {
        track: mockTrack,
        coverSize: 'lg',
        className: 'w-[300px]',
    },
};

export const Empty: Story = {
    args: {
        track: null,
        className: 'w-[300px]',
    },
};