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

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

const meta: Meta<typeof PercentageCheck> = {
  title: 'Components/Text/PercentageCheck',
  component: PercentageCheck,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>PercentageCheck</code> component is a utility for
              displaying percentage values in a user-friendly format. It
              converts decimal values to percentages, allowing for customization
              of decimal places, and provides options for displaying text when
              the value is less than 1%.
            </span>
          }
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof PercentageCheck>

const Template: Story = {
  render: (args) => {
    return <PercentageCheck {...args} />
  },
}
export const Basic: Story = {
  ...Template,
  args: {
    percent: 0.5,
  },
}

export const DecimalScale: Story = {
  ...Template,
  args: {
    percent: 0.5,
    decimalScale: 2,
  },
}

export const LessThanZeroText: Story = {
  ...Template,
  args: {
    percent: 0.005,
    lessThanZeroText: 'Percent is between 0 and 1%',
  },
}

export const NoConversion: Story = {
  ...Template,
  args: {
    percent: 5,
    noConversion: true,
  },
}

export const RoundNumber: Story = {
  ...Template,
  args: {
    percent: 1.5,
    roundNumber: true,
  },
}

export const CustomClass: Story = {
  ...Template,
  args: {
    percent: 0.5,
    customClass: 'font-bold',
  },
}