import type { Meta, StoryObj } from '@storybook/react';
import { Progress } from './progress';
import React from 'react';

const meta: Meta<typeof Progress> = {
  title: 'UI/Progress',
  component: Progress,
  render: args => <Progress {...args} />,
  argTypes: {
    value: {
      control: { type: 'range', min: 0, max: 100, step: 1 },
    },
    variant: {
      control: 'select',
      options: ['default', 'success', 'info', 'warning', 'destructive'],
    },
  },
};

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

export const Default: Story = {
  args: {
    value: 33,
  },
  render: args => (
    <div className="w-[400px]">
      <Progress {...args} />
    </div>
  ),
};

export const Complete: Story = {
  args: {
    value: 100,
  },
  render: args => (
    <div className="w-[400px]">
      <Progress {...args} />
    </div>
  ),
};

export const Variants: Story = {
  render: () => (
    <div className="w-[400px] space-y-3">
      <Progress value={70} variant="default" />
      <Progress value={85} variant="success" />
      <Progress value={50} variant="info" />
      <Progress value={60} variant="warning" />
      <Progress value={30} variant="destructive" />
    </div>
  ),
};