import {ProductVariantPrice} from '../components/atoms/product-variant-price'

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

type ProductVariantPriceProps = React.ComponentProps<typeof ProductVariantPrice>

const meta = {
  title: 'Atoms/ProductVariantPrice',
  component: ProductVariantPrice,
  parameters: {
    layout: 'padded',
  },
  argTypes: {
    amount: {
      control: 'text',
    },
    currencyCode: {
      control: 'select',
      options: ['USD', 'CAD', 'EUR', 'GBP', 'JPY'],
    },
    compareAtPriceAmount: {
      control: 'text',
    },
    compareAtPriceCurrencyCode: {
      control: 'select',
      options: ['USD', 'CAD', 'EUR', 'GBP', 'JPY'],
    },
    className: {
      control: 'text',
    },
    currentPriceClassName: {
      control: 'text',
    },
    originalPriceClassName: {
      control: 'text',
    },
    containerClassName: {
      control: 'text',
    },
  },
  tags: ['autodocs'],
} satisfies Meta<ProductVariantPriceProps>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    amount: '29.99',
    currencyCode: 'USD',
  },
}

export const WithDiscount: Story = {
  name: 'With Discount',
  args: {
    amount: '24.99',
    currencyCode: 'USD',
    compareAtPriceAmount: '39.99',
  },
}

export const CustomStyling: Story = {
  name: 'Custom Styling',
  args: {
    amount: '89.99',
    currencyCode: 'USD',
    compareAtPriceAmount: '119.99',
    currentPriceClassName: 'text-2xl font-bold text-green-600',
    originalPriceClassName: 'text-lg text-red-500 line-through',
    containerClassName: 'gap-3 p-4 bg-gray-50 rounded-lg',
  },
}
