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

import Icon from './Icon'
import { DocsTemplate } from '../../../.storybook'

const meta: Meta<typeof Icon> = {
  title: 'Components/Icon',
  component: Icon,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-79&p=f&t=9sfAuE3EBY4eOx7o-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-79&p=f&t=9sfAuE3EBY4eOx7o-0'
          description={
            <span>
              The <code>Icon</code> is a visual indicator designed to quickly
              inform users of available tooltips or popovers within an
              interface. Its purpose is to provide a visual cue, helping users
              discover additional information or contextual actions related to a
              specific element.
              <br />
              <br />
              To view the full list of icons, please see our{' '}
              <a href='/?path=/docs/general-style-guide-iconography--docs'>
                Iconography
              </a>{' '}
              docs.
            </span>
          }
          infoBullets={[
            'Use the Icon to visually indicate that more information or actions are available upon interaction.',
            'Ensure the Icon is easily recognizable and consistently positioned across the interface to maintain user familiarity and usability.',
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof Icon>

const Template: Story = {
  render: (args) => {
    return <Icon {...args} />
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    icon: 'trash',
    iconSize: '40px',
    color: 'dark-red',
  },
}

Basic.storyName = 'Icon'

export const CustomStyle: Story = {
  ...Template,
  args: {
    icon: 'heart',
    style: {
      height: '100px',
      width: '100px',
      '--svg-color': 'var(--red)',
    } as React.CSSProperties,
  },
}

export const TailwindClasses: Story = {
  ...Template,
  args: {
    icon: 'heart',
    iconSize: '40px',
    className: '[&_path]:fill-red [&_circle]:fill-red [&_rect]:fill-red',
  },
}