import React from 'react'
import { type Meta, type StoryObj } from '@storybook/react-vite'

import Pill, { pillColorList } from './Pill'
import { DocsTemplate } from '../../../.storybook'

const meta: Meta<typeof Pill> = {
  title: 'Components/Pill',
  component: Pill,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-334&t=CdMnrLNv0lNFwXr0-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-334&t=CdMnrLNv0lNFwXr0-0'
          description={
            <span>
              The <code>Pill</code> component is a small, pill-shaped design
              element that displays a numerical value. It is commonly used to
              highlight counts, quantities, or metrics in a visually prominent
              and compact format. The <code>Pill</code>'s concise presentation
              makes it ideal for conveying essential information at a glance,
              adding emphasis to important data points within the interface.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Utilize different color variations for the Pill to represent
              various states, such as success, warning, or error, based on the
              associated data.
            </span>,
          ]}
        />
      ),
    },
    controls: { sort: 'requiredFirst' },
  },
}

export default meta

type Story = StoryObj<typeof Pill>

const Template: Story = {
  render: (args) => {
    return <Pill {...args} />
  },
}
export const Basic: Story = {
  ...Template,
  args: {
    color: 'red',
    number: 32,
  },
}

const AllTemplate: Story = {
  render: () => {
    return (
      <div
        className='flex items-center'
        style={{ flexWrap: 'wrap', gap: '16px' }}
      >
        {pillColorList.map((pillColor) => (
          <Pill color={pillColor} key={pillColor} number={32} />
        ))}
      </div>
    )
  },
}

export const AllVariations: Story = {
  ...AllTemplate,
  args: {},
}