import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
import { colorPalette } from '../theme/hugo/colors';

export const colorSections = {
  'Neutral Colors': [
    { title: 'Brand', colors: colorPalette.newBase.brand },
    { title: 'Grey', colors: colorPalette.newBase.grey },
    { title: 'Black Ink', colors: colorPalette.newBase.blackInk },
  ],
  'Feedback Colors': [
    {
      title: 'Green',
      subtitle: 'Success states',
      colors: colorPalette.newBase.green,
    },
    {
      title: 'Red',
      subtitle: 'Error states',
      colors: colorPalette.newBase.red,
    },
    {
      title: 'Yellow',
      subtitle: 'Warning states',
      colors: colorPalette.newBase.yellow,
    },
    {
      title: 'Sky Blue',
      subtitle: 'Info states',
      colors: colorPalette.newBase.skyBlue,
    },
  ],
  'Themes colors - Paleta extendida': [
    { title: 'Purple', colors: colorPalette.newBase.purple },
    { title: 'Teal', colors: colorPalette.newBase.teal },
    { title: 'Lime', colors: colorPalette.newBase.lime },
    { title: 'Flamingo', colors: colorPalette.newBase.flamingo },
    { title: 'Tan', colors: colorPalette.newBase.tan },
    { title: 'Salmon', colors: colorPalette.newBase.salmon },
    { title: 'Pink', colors: colorPalette.newBase.pink },
    { title: 'Mulberry', colors: colorPalette.newBase.mulberry },
    { title: 'Sunshine', colors: colorPalette.newBase.sunshine },
    { title: 'Black Ink', colors: colorPalette.newBase.blackInk },
  ],
};

<Meta title="Design System/Colors/Base" />

# Base colors

Colores que construyen la totalidad de HuGo

{Object.keys(colorSections).map(sectionTitle => (

<div key={sectionTitle}>
  <h3>{sectionTitle}</h3>
  <ColorPalette>
    {colorSections[sectionTitle].map(color => (
      <ColorItem
        key={color.title}
        title={color.title}
        subtitle={color.subtitle}
        colors={color.colors}
      />
    ))}
  </ColorPalette>
</div>
))}
