/components/list/variations

import { badge } from "@hedia/hexui/components/badge";
import { button } from "@hedia/hexui/components/button";
import { list, listItem } from "@hedia/hexui/components/list";
import { toggle } from "@hedia/hexui/components/toggle";
import { button as htmlButton, form, input, span } from "@hedia/html/elements";
import { checkmarkOutlineIcon, chevRightOutlineIcon, deleteOutlineIcon } from "@hedia/iconly/outline";

export default {
  AlternativeLeadingAndTrailing,
  ListWithFormSubmitButtons,
};

export function AlternativeLeadingAndTrailing() {
  return list(
    listItem({
      leading: [badge({ color: "green", size: "lg" }, "Approved")],
      title: "Badge",
      subtitle: "and chevron",
      trailing: [chevRightOutlineIcon()],
      href: "#",
    }),
    listItem({
      leading: [badge({ color: "red", size: "lg" }, "Rejected")],
      title: "Badge",
      subtitle: "and button",
      trailing: [button({ kind: "secondary-danger", shape: "round" }, deleteOutlineIcon())],
    }),
    listItem({
      leading: [badge({ color: "base", size: "lg" }, "Pending")],
      title: "Badge",
      subtitle: "and toggle",
      trailing: [
        form(
          { method: "POST", action: "#" },
          input({ type: "hidden", name: "method", value: "update" }),
          toggle({ active: true }),
        ),
      ],
    }),
    listItem({
      leading: [badge({ color: "base", size: "lg" }, "Pending")],
      title: "Badge",
      subtitle: "and toggle",
      trailing: [
        form(
          { method: "POST", action: "#" },
          input({ type: "hidden", name: "method", value: "update" }),
          toggle({ active: false }),
        ),
      ],
    }),
  );
}

export function ListWithFormSubmitButtons() {
  return list(
    form(
      { method: "POST", action: "#" },
      htmlButton(
        listItem({
          title: "Approved Item",
          trailing: [span({ class: "text-green" }, checkmarkOutlineIcon()), chevRightOutlineIcon()],
        }),
      ),
    ),
    form(
      { method: "POST", action: "#" },
      htmlButton(
        listItem({
          title: "Pending Item",
          trailing: [chevRightOutlineIcon()],
        }),
      ),
    ),
    form(
      { method: "POST", action: "#" },
      htmlButton(
        listItem({
          title: "Another Item",
          trailing: [chevRightOutlineIcon()],
        }),
      ),
    ),
  );
}