import { Skeleton } from './Skeleton';

export default {
  title: 'Atoms/Skeleton',
  component: Skeleton,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['text', 'circular', 'rectangular'],
    },
  },
};

export const Text = {
  args: {
    variant: 'text',
  },
};

export const Circular = {
  args: {
    variant: 'circular',
    width: 40,
    height: 40,
  },
};

export const Rectangular = {
  args: {
    variant: 'rectangular',
    width: 200,
    height: 100,
  },
};

export const CustomSize = {
  args: {
    variant: 'text',
    width: '50%',
    height: 20,
  },
};

export const CardSkeleton = {
  render: () => (
    <div className="border rounded-lg p-4 space-y-3">
      <Skeleton variant="circular" width={40} height={40} />
      <Skeleton variant="text" width="80%" />
      <Skeleton variant="text" width="60%" />
      <Skeleton variant="rectangular" width="100%" height={100} />
    </div>
  ),
};

