import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
import { Examples, Example, Note, Title, CustomArgsTable, VariantsTable,VariantRow } from '@calcom/storybook/components'
import { Alert } from './Alert';

<Meta title="UI/Alert" component={Alert} />

<Title title="Alert" suffix="Brief" subtitle="Version 2.0 — Last Update: 04 jan 2023"/>

## Definition
Alerts provide time-based feedback to the user after taking an action.

## Structure
Each alert has a state to represent neutral, positive or negative responses.

<CustomArgsTable of={Alert} />

<Examples title="Alert style">
  <Example title="Error">
    <Alert severity="error" title="Summarise what happened" message="Describe what can be done about it here." />
  </Example>
  <Example title="Warning">
    <Alert severity="warning" title="Summarise what happened" message="Describe what can be done about it here." />
  </Example>
  <Example title="With actions">
    <Alert
      severity="warning"
      title="Summarise what happened"
      message="Describe what can be done about it here."
      actions={<><button>Cancel me</button></>}
      />
  </Example>
</Examples>

<Title offset title="Alert" suffix="Variants" />

<Canvas>
  <Story
    name="Alert"
    args={{
      severity: 'success',
      title: 'Summarise what happened',
      message: 'Describe what can be done about it here.',
    }}
    argTypes={{
      severity: {
        control: {
          type: 'inline-radio',
          options: ['success', 'warning', 'error', 'neutral', 'info'],
        },
      },
      title: {
        control: {
          type: 'text'
        }
      },
      message: {
        control: {
          type: 'text'
        }
      },
    }}
  >
    {({ severity, title, message }) => (
      <VariantsTable titles={['Default']} columnMinWidth={150}>
        <VariantRow variant={severity}>
          <Alert severity={severity} title={title} message={message} />
        </VariantRow>
      </VariantsTable>
    )}
  </Story>
</Canvas>