import React from 'react'
import { type Meta } from '@storybook/react'
import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
import { MultiActionTile, type MultiActionTileProps } from '../index'

export default {
  title: 'Components/Tiles/MultiActionTile (Deprecated)',
  parameters: {
    chromatic: { disable: false },
    controls: { disable: true },
  },
} satisfies Meta

const StickerSheetTemplate: StickerSheetStory = {
  render: () => {
    const defaultProps = {
      title: 'Title',
      metadata: 'Side A',
      information: 'Side B',
      primaryAction: {
        label: 'Take Action!',
      },
      secondaryAction: {
        label: 'Nevermind',
      },
    } satisfies MultiActionTileProps

    const variants = ['default', 'expert-advice'] satisfies MultiActionTileProps['variant'][]

    return (
      <>
        <StickerSheet title="MultiActionTile">
          {variants.map((variant) => (
            <StickerSheet.Row key={variant} header={variant}>
              <MultiActionTile {...defaultProps} variant={variant} />
            </StickerSheet.Row>
          ))}
        </StickerSheet>
      </>
    )
  },
}

export const StickerSheetDefault: StickerSheetStory = {
  ...StickerSheetTemplate,
  name: 'Sticker Sheet (Default)',
}

export const StickerSheetRTL: StickerSheetStory = {
  ...StickerSheetTemplate,
  name: 'Sticker Sheet (RTL)',
  parameters: { textDirection: 'rtl' },
}
