import { ColorRender } from '../components'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Colors',
  section: 'colors',
  subtitle:
    'A transparent color system optimized for blur effects and legibility.',
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Neutral',
    type: 'color',
    style: {
      badge: 'invertable',
    },
    description:
      'Neutral color scale that automatically adapts to light and dark mode.',
    render: () => <ColorRender id="neutral" />,
  },
  {
    name: 'Neutral Inverted',
    type: 'color',
    style: {
      badge: 'invertable',
      theme: 'light',
    },
    description:
      'Inverted neutral color scale that automatically adapts to light and dark mode.',
    render: () => <ColorRender id="neutralInverted" theme="light" />,
  },
  {
    name: 'Red',
    type: 'color',
    style: {
      badge: 'dynamic',
    },
    description:
      'Red color scale that automatically shifts in tone a little for light and dark mode.',
    render: () => <ColorRender id="red" />,
  },
  {
    name: 'Orange',
    type: 'color',
    style: {
      badge: 'dynamic',
    },
    description:
      'Orange color scale that automatically shifts in tone a little for light and dark mode.',
    render: () => <ColorRender id="orange" />,
  },
  {
    name: 'Purple',
    type: 'color',
    style: {
      badge: 'dynamic',
    },
    description:
      'Purple color scale that automatically shifts in tone a little for light and dark mode.',
    render: () => <ColorRender id="blue" />,
  },
  {
    name: 'Green',
    type: 'color',
    style: {
      badge: 'dynamic',
    },
    description:
      'Green color scale that automatically shifts in tone a little for light and dark mode.',
    render: () => <ColorRender id="green" />,
  },
  {
    name: 'White',
    type: 'color',
    style: {
      badge: 'static',
    },
    description:
      'White color scale that automatically shifts in tone a little for light and dark mode.',
    render: () => <ColorRender id="white" theme="dark" tag="static" />,
  },
  {
    name: 'Black',
    type: 'color',
    style: {
      badge: 'static',
      theme: 'light',
    },
    description:
      'Black color scale that automatically shifts in tone a little for light and dark mode.',
    render: () => <ColorRender id="black" theme="light" tag="static" />,
  },
]
