import type { Meta, StoryObj } from '@storybook/react'
import { Button } from '../Button'
import { Toaster } from '../Toaster'
import { Typography } from '../Typography'
import { platformAd } from './PlatformAd'

const meta: Meta = {
  component: Toaster,
  title: 'Blocks/PlatformAd',
}

export default meta
type Story = StoryObj<typeof Toaster>

export const Default: Story = {
  render: (_args: any) => {
    return (
      <>
        <Toaster />
        <Button
          onClick={() =>
            platformAd({
              description:
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt. ',
              link: { href: 'https://example.com', text: 'Learn more' },
            })
          }
        >
          Show Platform Ad
        </Button>
      </>
    )
  },
}

export const AllIcons = (_args: any) => {
  setTimeout(() => {
    platformAd({
      description: 'Platform Ad with Product Icon Icon',
      icon: 'product',
      link: { href: 'https://example.com', text: 'Learn more' },
    })
    platformAd({
      description: 'Platform Ad with Product News Icon',
      icon: 'news',
      link: { href: 'https://example.com', text: 'Learn more' },
    })
    platformAd({
      description: 'Platform Ad with Product Collaboration Icon',
      icon: 'collaboration',
      link: { href: 'https://example.com', text: 'Learn more' },
    })
    platformAd({
      description: 'Platform Ad with Product Event Icon',
      icon: 'event',
      link: { href: 'https://example.com', text: 'Learn more' },
    })
  })

  return (
    <>
      <Toaster visibleToasts={4} expand />
      <Typography>Show Platform Ad with Icon Variants</Typography>
    </>
  )
}