Dropdown menu

"use client";

import { useState } from "react";
import { Button } from "@/registry/ds/button";
import { ChevronDown } from "@/registry/ds/icons";
import { Menu, MenuCheckboxItem, MenuGroup } from "@/registry/ds/menu";

export default function MenuCheckbox() {
  const [cols, setCols] = useState({ codigo: true, docente: true, cupo: false });
  return (
    <Menu trigger={<Button variant="tonal" size="sm" iconRight={<ChevronDown />}>Columnas</Button>}>
      <MenuGroup label="Mostrar">
        {(["codigo", "docente", "cupo"] as const).map((k) => (
          <MenuCheckboxItem key={k} checked={cols[k]} onCheckedChange={(v) => setCols((c) => ({ ...c, [k]: v }))} closeOnClick={false}>
            {{ codigo: "Código", docente: "Docente", cupo: "Cupo" }[k]}
          </MenuCheckboxItem>
        ))}
      </MenuGroup>
    </Menu>
  );
}