import type { Meta, StoryObj } from "@storybook/react";
import type { ErrorMessageProps } from ".";
import { ErrorMessage } from ".";

type StoryType = StoryObj<typeof ErrorMessage>;

const meta: Meta<typeof ErrorMessage> = {
  title: "Forms/ErrorMessage",
  component: ErrorMessage,
};

export const Default: StoryType = {
  render: (args: ErrorMessageProps) => <ErrorMessage {...args} />,
  args: {
    errorMessage: "This is an error message",
  },
};

export const LongMessage: StoryType = {
  render: (args: ErrorMessageProps) => <ErrorMessage {...args} />,
  args: {
    errorMessage:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum, mauris ac egestas rutrum, dui urna imperdiet velit, ac malesuada velit augue eget orci. Duis id purus et elit tempus egestas ut eget tellus. Praesent tempus sit amet metus iaculis auctor. Morbi aliquet nibh sit amet neque congue dictum. Proin auctor pellentesque facilisis. Donec rutrum at ante a pulvinar. In hac habitasse platea dictumst. Mauris non blandit nulla. Duis facilisis fringilla cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus.",
  },
};

export const HTMLMessage: StoryType = {
  render: (args: ErrorMessageProps) => <ErrorMessage {...args} />,
  args: {
    errorMessage:
      "Enter a UK phone number or <a href='#'>contact us</a> for help",
  },
};

export default meta;
