import type { Meta, StoryObj } from "@storybook/react";
import type { AlertProps } from "./Alert";
import { Alert } from "./Alert";

type StoryType = StoryObj<typeof Alert>;

const meta: Meta<typeof Alert> = {
  title: "Components/Alert",
  component: Alert,
  argTypes: {
    variant: {
      control: { type: "radio" },
      options: ["info", "success", "warning", "error"],
      header: { control: "text" },
    },
  },
};

export const Default: StoryType = {
  render: (args: AlertProps) => (
    <Alert {...args}>
      Today is{" "}
      {new Intl.DateTimeFormat("en-GB", {
        dateStyle: "long",
      }).format(new Date())}
    </Alert>
  ),
  args: {
    variant: "info",
    show: true,
    header: "",
  },
};

export const WithHeader: StoryType = {
  render: (args: AlertProps) => (
    <Alert {...args}>{args.children || "This is an alert with a header"}</Alert>
  ),
  args: {
    variant: "info",
    show: true,
    header: "Information",
    children: "This is an alert with a header",
  },
};

export default meta;
