Chip Choice

"use client";

import React, {useState} from "react";
import {ChipChoice, ChipChoiceType, IconMagic, Menu} from "@brynlabs/fusion-ui";
import classNames from "classnames";

const dropDownList: Menu = [
  {
    items: [
      {
        title: "Orange",
      },
      {
        title: "Lemon",
      },
      {
        icon: <IconMagic />,
        title: "Lime",
      },
      {
        title: "Tangerine",
      },
    ],
  },
];

const chips: ChipChoiceType[] = [
  {label: "Apple", icon: <IconMagic />, selected: true},
  {label: "Banana"},
  {label: dropDownList[0].items[0].title, dropDownList: dropDownList},
];

export const ChipChoiceExample: React.FC = () => {
  const [radioValues, setRadioValues] = useState(chips);
  const [checkboxValues, setCheckboxValues] = useState(chips);

  return (
    <div style={{display: "flex", flexDirection: "column", gap: "10px"}}>
      <span className={classNames("heading-5-font")}>Choose one (Radio)</span>
      <ChipChoice type={"radio"} chips={radioValues} onChange={setRadioValues} />
      Selected:{" "}
      {radioValues
        .filter(c => c.selected)
        .map(c => c.label)
        .join(", ")}
      <br />
      <br />
      <span className={classNames("heading-5-font")}>Choose some (Checkbox)</span>
      <ChipChoice
        type={"checkbox"}
        chipStyle={"elevated"}
        chips={checkboxValues}
        onChange={setCheckboxValues}
      />
      Selected:{" "}
      {checkboxValues
        .filter(c => c.selected)
        .map(c => c.label)
        .join(", ")}
    </div>
  );
};