import React from 'react'

import type { Meta } from '@storybook/react'
import { ModalStatus } from '../components/StatusModal/StatusModal'
import { OnAction } from '../types'

const actions: OnAction[] = [
  {
    label: 'Cancelar',
    action: () => {},
  },
  {
    label: 'Entendi',
    variant: 'contained',
    action: () => {},
  },
]

const meta = {
  title: 'Layout/ModalStatus',
  component: ModalStatus,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof ModalStatus>

export default meta

export const ModalSuccess = () => {
  return (
    <ModalStatus
      title="Título"
      text="Lorem ipsum dolor sit amet."
      actions={actions}
      type="success"
    />
  )
}

ModalSuccess.storyName = 'Modal Success'

export const ModalWarning = () => {
  return (
    <ModalStatus
      title="Título"
      text="Lorem ipsum dolor sit amet."
      actions={actions}
      type="warning"
    />
  )
}

ModalWarning.storyName = 'Modal Warning'

export const ModalInfo = () => {
  return (
    <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." type="info" actions={actions} />
  )
}

ModalInfo.storyName = 'Modal Info'

export const ModalTextElement = () => {
  return (
    <ModalStatus title="Título" text={<p>Isso é um elemento P dentro da prop  text</p>} type="info" actions={actions} />
  )
}

ModalInfo.ModalTextElement = 'Modal Text Element'