Chip

"use client";

import React from "react";
import {Chip, Menu, IconFilter, IconMagic} from "@brynlabs/fusion-ui";

export const ChipExample = () => {
  const dropDownList: Menu = [
    {
      items: [
        {
          title: "Apple",
        },
        {
          title: "Banana",
        },
        {
          icon: <IconMagic />,
          title: "Orange",
        },
      ],
    },
  ];

  return (
    <div style={{display: "flex", gap: "1rem", flexWrap: "wrap"}}>
      <Chip label={"Click Me"} onClick={() => alert("Chip Clicked ")} />
      <Chip label={"Chip"} state={"selected"} />
      <Chip label={"Chip"} state={"unselected"} />
      <Chip label={"Chip"} state={"disabled"} />

      <Chip label={"Chip Elevated"} style={"elevated"} />
      <Chip label={"Chip Elevated"} state={"selected"} style={"elevated"} />

      <Chip label={"Chip Icon"} icon={<IconFilter />} />
      <Chip label={"Chip Icon"} state={"selected"} icon={<IconFilter />} />

      <Chip label={"Chip Dropdown"} dropDownList={dropDownList} />
      <Chip label={"Chip Dropdown"} state={"selected"} dropDownList={dropDownList} />

      <Chip label={"Chip Remove"} onRemove={() => console.log("Removed")} />
      <Chip label={"Chip Remove"} state={"selected"} onRemove={() => console.log("Removed")} />

      <Chip label={"Chip Drag"} hasDragButton />
      <Chip label={"Chip Drag"} state={"selected"} hasDragButton />

      <Chip
        label={"Chip All"}
        style={"elevated"}
        icon={<IconFilter />}
        dropDownList={dropDownList}
        hasDragButton
        onRemove={() => console.log("Removed")}
      />
      <Chip
        label={"Chip All"}
        state={"selected"}
        style={"elevated"}
        icon={<IconFilter />}
        dropDownList={dropDownList}
        hasDragButton
        onRemove={() => console.log("Removed")}
      />
      <Chip
        label={"Chip All"}
        state={"unselected"}
        style={"elevated"}
        icon={<IconFilter />}
        dropDownList={dropDownList}
        hasDragButton
        onRemove={() => console.log("Removed")}
      />
      <Chip
        label={"Chip All"}
        state={"disabled"}
        style={"elevated"}
        icon={<IconFilter />}
        dropDownList={dropDownList}
        hasDragButton
        onRemove={() => console.log("Removed")}
      />
    </div>
  );
};