import type { Meta, StoryObj } from '@storybook/angular';
import { ColorDisplay } from './color-display';
import { moduleMetadata } from '@storybook/angular';
import { NgStyle } from '@angular/common';

const meta: Meta<ColorDisplay> = {
  title: 'Design/Colors/ColorDisplay',
  component: ColorDisplay,
  tags: ['autodocs'],
  decorators: [
    moduleMetadata({
      imports: [NgStyle],
      providers: []
    })
  ],
  argTypes: {
    hexaCode: {
      control: 'text',
      description: "Code hexadécimal de la couleur"
    },
    name: {
      control: 'text',
      description: "Nom de la couleur"
    },
    backgroundColor: {
      control: 'text',
      description: "Couleur de fond (si différente du code hexa)"
    }
  }
};

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

export const Red: Story = {
  args: {
    hexaCode: '#cc0000',
    name: 'Rouge',
    backgroundColor: ''
  }
};

export const Blue: Story = {
  args: {
    hexaCode: '#0000cc',
    name: 'Bleu',
    backgroundColor: ''
  }
};

export const Green: Story = {
  args: {
    hexaCode: '#00cc00',
    name: 'Vert',
    backgroundColor: ''
  }
};

export const Yellow: Story = {
  args: {
    hexaCode: '#ffcc00',
    name: 'Jaune',
    backgroundColor: ''
  }
};

export const Purple: Story = {
  args: {
    hexaCode: '#9900cc',
    name: 'Violet',
    backgroundColor: ''
  }
};

export const Orange: Story = {
  args: {
    hexaCode: '#ff6600',
    name: 'Orange',
    backgroundColor: ''
  }
};

export const Black: Story = {
  args: {
    hexaCode: '#000000',
    name: 'Noir',
    backgroundColor: ''
  }
};

export const White: Story = {
  args: {
    hexaCode: '#ffffff',
    name: 'Blanc',
    backgroundColor: ''
  }
};
