Visual Select

"use client";

import React, {useState} from "react";
import {VisualSelect, VisualSelectOption} from "@brynlabs/fusion-ui/dist/components/visual-select";

const COLORS = {gold: "#fabb02", red: "#fa022f", sand: "#ddcfa6", blue: "#2831ad"};

export const VisualSelectExample = () => {
  const [color, setColor] = useState("gold");
  const [colors, setColors] = useState<string[]>(["gold"]);
  const [map, setMap] = useState("light");
  const [regular, setRegular] = useState("b");
  const [large, setLarge] = useState("b");
  const [invalid, setInvalid] = useState<string[]>([]);

  return (
    <>
      <VisualSelect label="Single select" size="small" value={color} onChange={setColor}>
        {Object.entries(COLORS).map(([name, hex]) => (
          <VisualSelectOption key={name} value={name} aria-label={name}>
            <div style={{background: hex}} />
          </VisualSelectOption>
        ))}
      </VisualSelect>

      <VisualSelect
        label="Multi select (min 1, max 3)"
        mode="multiple"
        min={1}
        max={3}
        value={colors}
        onChange={setColors}>
        {Object.entries(COLORS).map(([name, hex]) => (
          <VisualSelectOption key={name} value={name} aria-label={name}>
            <div style={{background: hex}} />
          </VisualSelectOption>
        ))}
      </VisualSelect>

      <VisualSelect label="Sizes: regular (64px)" value={regular} onChange={setRegular}>
        <VisualSelectOption value="a" label="A">
          <div style={{background: COLORS.gold}} />
        </VisualSelectOption>
        <VisualSelectOption value="b" label="B">
          <div style={{background: COLORS.red}} />
        </VisualSelectOption>
      </VisualSelect>

      <VisualSelect
        label="Sizes: large (96px), any component as content"
        value={large}
        onChange={setLarge}>
        <VisualSelectOption value="a" label="Plan A">
          <div style={{display: "grid", placeItems: "center"}}>
            <strong>A</strong>
          </div>
        </VisualSelectOption>
        <VisualSelectOption value="b" label="Plan B">
          <div style={{display: "grid", placeItems: "center"}}>
            <strong>B</strong>
          </div>
        </VisualSelectOption>
      </VisualSelect>

      <VisualSelect
        label="Images, custom size (210 x 140)"
        size="custom"
        width={210}
        height={140}
        value={map}
        onChange={setMap}>
        <VisualSelectOption
          value="light"
          label="Light"
          image={{src: "https://picsum.photos/seed/light/420/280", alt: "Light"}}
        />
        <VisualSelectOption
          value="dark"
          label="Dark"
          image={{src: "https://picsum.photos/seed/dark/420/280", alt: "Dark"}}
        />
      </VisualSelect>

      <VisualSelect
        label="Disabled / invalid"
        mode="multiple"
        invalid
        errorMessage="Required"
        value={invalid}
        onChange={setInvalid}>
        <VisualSelectOption value="a" aria-label="a">
          <div style={{background: COLORS.gold}} />
        </VisualSelectOption>
        <VisualSelectOption value="b" aria-label="b" disabled>
          <div style={{background: COLORS.red}} />
        </VisualSelectOption>
      </VisualSelect>
    </>
  );
};