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

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

const meta: Meta<typeof ReviewStars> = {
  title: 'Components/ReviewStars',
  component: ReviewStars,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>ReviewStars</code> component visually represents a
              rating scale from 0 to 5 using a combination of full, half, and
              empty stars. It accurately reflects decimal ratings by showing a
              full star for values of 0.8 or greater, a half star for values
              between 0.3 and 0.79, and an empty star for values below 0.3. This
              component helps users quickly gauge reviews or ratings in an
              intuitive format.
            </span>
          }
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof ReviewStars>

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

export const Basic: Story = {
  ...Template,
  args: {
    rating: 4.45,
  },
}

export const EmptyStars: Story = {
  ...Template,
  args: {
    rating: 0,
  },
}

export const HalfStars: Story = {
  ...Template,
  args: {
    rating: 2.5,
  },
}

export const FullStars: Story = {
  ...Template,
  args: {
    rating: 5,
  },
}