/components/input/email

import { input } from "@hedia/hexui/components/input";
import { chevRightOutlineIcon, mailOutlineIcon } from "@hedia/iconly/outline";

export default {
  Default,
  WithHelpText,
  WithError,
  Disabled,
};

export function Default() {
  return [
    input({
      name: "email",
      placeholder: "Email",
      type: "email",
    }),
    input({
      id: "email-1",
      label: "Enter your email address:",
      name: "email",
      type: "email",
    }),
    input({
      leadingIcon: mailOutlineIcon(),
      name: "email",
      placeholder: "Email",
      trailingIcon: chevRightOutlineIcon(),
      type: "email",
    }),
    input({
      leadingIcon: mailOutlineIcon(),
      name: "email",
      placeholder: "Email",
      trailingIcon: chevRightOutlineIcon(),
      type: "email",
      value: "email@hedia.com",
    }),
  ];
}

export function WithHelpText() {
  return [
    input({
      helpText: "We'll never share your email with anyone else.",
      id: "email-personal",
      label: "Email address",
      name: "email",
      placeholder: "you@example.com",
      type: "email",
    }),
    input({
      helpText: "Must be a valid company email address.",
      id: "email-work",
      leadingIcon: mailOutlineIcon(),
      label: "Work email",
      name: "email",
      placeholder: "you@company.com",
      type: "email",
    }),
  ];
}

export function WithError() {
  return [
    input({
      error: true,
      errorText: "Email is required",
      name: "email",
      placeholder: "Email",
      type: "email",
    }),
    input({
      error: true,
      errorText: "Email is required",
      id: "email-1",
      label: "Enter your email address:",
      name: "email",
      type: "email",
    }),
    input({
      error: true,
      errorText: "Email is required",
      leadingIcon: mailOutlineIcon(),
      name: "email",
      placeholder: "Email",
      trailingIcon: chevRightOutlineIcon(),
      type: "email",
    }),
    input({
      error: true,
      errorText: "Email is already in use",
      leadingIcon: mailOutlineIcon(),
      name: "email",
      placeholder: "Email",
      trailingIcon: chevRightOutlineIcon(),
      type: "email",
      value: "email@hedia.com",
    }),
  ];
}

export function Disabled() {
  return [
    input({
      disabled: true,
      name: "email",
      placeholder: "Email",
      type: "email",
    }),
    input({
      disabled: true,
      id: "email-1",
      label: "Enter your email address:",
      name: "email",
      type: "email",
    }),
    input({
      disabled: true,
      leadingIcon: mailOutlineIcon(),
      name: "email",
      placeholder: "Email",
      trailingIcon: chevRightOutlineIcon(),
      type: "email",
    }),
    input({
      disabled: true,
      leadingIcon: mailOutlineIcon(),
      name: "email",
      placeholder: "Email",
      trailingIcon: chevRightOutlineIcon(),
      type: "email",
      value: "email@hedia.com",
    }),
  ];
}