import { Meta, StoryObj } from "@storybook/react"
import React from "react"
import { TestGridContainer } from "../../../tests/TestGridContainer"
import { Error } from "../../icons/material-symbols/outlined/Error"
import { Alert } from "./Alert"

type Story = StoryObj<typeof Alert>

const meta: Meta<typeof Alert> = {
  title: "Design System/Alert",
  component: Alert,
  args: {
    children: (
      <>
        <Alert.Icon value={Error} />
        <Alert.Content>
          <Alert.Title>5 items failed</Alert.Title>
          <Alert.Body>
            Purchases can fail due to network issues, gas fee increases, or
            because someone else bought the item before you.
          </Alert.Body>
        </Alert.Content>
      </>
    ),
  },
}

export default meta

export const Default: Story = {}

export const WithoutIcon: Story = {
  args: {
    children: (
      <Alert.Content>
        <Alert.Title>5 items failed</Alert.Title>
        <Alert.Body>
          Purchases can fail due to network issues, gas fee increases, or
          because someone else bought the item before you.
        </Alert.Body>
      </Alert.Content>
    ),
  },
}

export const AllVariants: Story = {
  render: function Render() {
    return (
      <TestGridContainer>
        <Alert {...meta.args} {...Default.args} />
        <Alert {...meta.args} {...WithoutIcon.args} />
      </TestGridContainer>
    )
  },
}