/components/select/basic

import { select } from "@hedia/hexui/components/select";
import { option } from "@hedia/html/elements";
import { arrowDownOutlineIcon, earthOutlineIcon, homeOutlineIcon } from "@hedia/iconly/outline";

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

export function Default() {
  return [
    select(
      {
        name: "country",
        placeholder: "Select country",
        required: true,
      },
      option("Denmark"),
      option("Norway"),
      option("Sweden"),
    ),
    select(
      {
        name: "city",
        placeholder: "Select city",
        required: true,
      },
      option("Copenhagen"),
      option("Oslo"),
      option("Stockholm"),
    ),
  ];
}

export function WithIcons() {
  return [
    select(
      {
        leadingIcon: earthOutlineIcon(),
        trailingIcon: arrowDownOutlineIcon(),
        name: "country",
        placeholder: "Select country",
        required: true,
      },
      option("Denmark"),
      option("Norway"),
      option("Sweden"),
    ),
    select(
      {
        leadingIcon: homeOutlineIcon(),
        trailingIcon: arrowDownOutlineIcon(),
        name: "city",
        placeholder: "Select city",
        required: true,
      },
      option("Copenhagen"),
      option("Oslo"),
      option("Stockholm"),
    ),
  ];
}

export function WithError() {
  return [
    select(
      {
        error: true,
        errorText: "Please select a country",
        leadingIcon: earthOutlineIcon(),
        name: "country",
        placeholder: "Select country",
        required: true,
      },
      option("Denmark"),
      option("Norway"),
      option("Sweden"),
    ),
    select(
      {
        leadingIcon: homeOutlineIcon(),
        error: true,
        errorText: "Please select a city",
        name: "city",
        placeholder: "Select city",
        required: true,
      },
      option("Copenhagen"),
      option("Oslo"),
      option("Stockholm"),
    ),
  ];
}

export function Disabled() {
  return [
    select(
      {
        disabled: true,
        leadingIcon: earthOutlineIcon(),
        name: "country",
        placeholder: "Select country",
      },
      option("Denmark"),
      option("Norway"),
      option("Sweden"),
    ),
    select(
      {
        disabled: true,
        leadingIcon: homeOutlineIcon(),
        name: "city",
        placeholder: "Select city",
        required: true,
      },
      option("Copenhagen"),
      option("Oslo"),
      option("Stockholm"),
    ),
  ];
}