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

const meta = {
  title: 'Features/Tracks/WaveformDisplay',
  component: WaveformDisplay,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    height: {
      control: { type: 'range', min: 40, max: 200, step: 10 },
    },
    color: {
      control: 'color',
    },
    progressColor: {
      control: 'color',
    },
    progress: {
      control: { type: 'range', min: 0, max: 1, step: 0.1 },
    },
  },
} satisfies Meta<typeof WaveformDisplay>;

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

export const Default: Story = {
  args: {
    trackId: '1',
    height: 80,
  },
};

export const Small: Story = {
  args: {
    trackId: '1',
    height: 40,
  },
};

export const Large: Story = {
  args: {
    trackId: '1',
    height: 150,
  },
};

export const WithProgress: Story = {
  args: {
    trackId: '1',
    height: 80,
    progress: 0.5,
  },
};

export const CustomColors: Story = {
  args: {
    trackId: '1',
    height: 80,
    color: '#8b5cf6',
    progressColor: '#a78bfa',
    progress: 0.3,
  },
};

export const Interactive: Story = {
  args: {
    trackId: '1',
    height: 100,
    onSeek: (position: number) => {
      console.log('Seek to:', position);
    },
  },
};

