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

import { EpilotIcon } from './EpilotIcon';

const meta: Meta<typeof EpilotIcon> = {
  title: 'EpilotIcon',
  component: EpilotIcon,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: 'Use the `<EpilotIcon>` React component to render an icon.',
      },
      canvas: {
        sourceState: 'shown',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    fill: { control: 'color' },
    size: { control: 'number' },
    width: { control: 'number' },
    height: { control: 'number' },
  },
};

export default meta;

export const Story: StoryObj<typeof EpilotIcon> = {
  args: {
    name: 'edit',
    variant: 'filled',
    size: 48,
    fill: '#000',
  },
};

/**
 * You can use CSS variables to change the color of the icon.
 */
export const CSSVariablesPrimary: StoryObj<typeof EpilotIcon> = {
  args: {
    name: 'epilot',
    variant: 'filled',
    size: 48,
    fill: 'var(--primary)',
  },
};

export const CSSVariablesSecondary: StoryObj<typeof EpilotIcon> = {
  args: {
    name: 'epilot',
    variant: 'filled',
    size: 48,
    fill: 'var(--secondary)',
  },
};

export const CSSVariablesSuccess: StoryObj<typeof EpilotIcon> = {
  args: {
    name: 'check_circle',
    variant: 'filled',
    size: 48,
    fill: 'var(--success)',
  },
};

export const CSSVariablesWarning: StoryObj<typeof EpilotIcon> = {
  args: {
    name: 'warning',
    variant: 'filled',
    size: 48,
    fill: 'var(--warning)',
  },
};

export const CSSVariablesError: StoryObj<typeof EpilotIcon> = {
  args: {
    name: 'error',
    variant: 'filled',
    size: 48,
    fill: 'var(--error)',
  },
};