import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconCheck } from '@tabler/icons-react';

import Property from '.';

const meta: Meta<typeof Property> = {
  component: Property,
  title: 'Composed Components/Property',
  parameters: {
    componentSubtitle:
      'Used to show properties of an element (ex: path, course)',
  },
  tags: ['autodocs'],
  args: {
    Icon: IconCheck,
    title: 'Status',
  },
};

export default meta;

type Story = StoryObj<typeof Property>;

export const Default: Story = {
  args: {},
};

export const WithDescription: Story = {
  args: {
    description: 'Success',
  },
};

export const WithVariant: Story = {
  args: {
    description: 'Success',
    variant: 'M',
  },
};

export const WithVisibleFalse: Story = {
  args: {
    visible: false,
  },
};

export const WithLoading: Story = {
  args: {
    loading: true,
  },
};

export const WithLoadingAndVariant: Story = {
  args: {
    variant: 'L',
    loading: true,
  },
};