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

import { DocsTemplate } from '../../../.storybook'
import { toast } from './Toast'
import ToastContent from './ToastContent'

export default {
  title: 'Components/Toast/ToastContent',
  component: ToastContent,
  parameters: {
    docs: {
      page: () => <DocsTemplate />,
    },
  },
} as Meta<typeof ToastContent>

type Story = StoryObj<typeof ToastContent>

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

export const Success: Story = {
  ...Template,
  args: {
    text: 'Content of the toast',
    type: 'success',
  },
}

export const Error: Story = {
  ...Template,
  args: {
    text: 'Content of the toast',
    type: 'error',
  },
}

export const Warning: Story = {
  ...Template,
  args: {
    text: 'Content of the toast',
    type: 'warning',
  },
}

export const Info: Story = {
  ...Template,
  args: {
    text: 'Content of the toast',
    type: 'info',
  },
}

export const Buttons: Story = {
  ...Template,
  args: {
    text: 'Content of the toast',
    type: 'info',
    buttons: [
      {
        as: 'link',
        to: '/',
        children: 'Link Button',
        routerComponent: 'a',
      },
      {
        children: 'Button',
        onClick: () => {
          toast({ message: 'You clicked the button!', type: 'success' })
        },
      },
    ],
  },
}

export const CustomIcon: Story = {
  ...Template,
  args: {
    text: 'Content of the toast with a custom icon',
    type: 'info',
    customIcon: 'calendar',
  },
}