import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import { Combobox } from "@managemate/react";

const meta = {
  title: "Forms/Combobox",
  component: Combobox,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "Combobox WAI-ARIA 1.2 (combobox + listbox). Floating UI pour positionnement, aria-activedescendant pour le focus virtuel sur l'option courante.",
      },
    },
  },
} satisfies Meta<typeof Combobox>;

export default meta;
type Story = StoryObj<typeof meta>;

const COUNTRIES = [
  { value: "fr", label: "France" },
  { value: "be", label: "Belgique" },
  { value: "ch", label: "Suisse" },
  { value: "ca", label: "Canada" },
  { value: "lu", label: "Luxembourg" },
  { value: "ma", label: "Maroc" },
  { value: "tn", label: "Tunisie" },
  { value: "sn", label: "Sénégal" },
  { value: "ci", label: "Côte d'Ivoire" },
];

export const Default: Story = {
  render: () => {
    const [val, setVal] = useState<string | undefined>();
    return (
      <div style={{ width: 320 }}>
        <Combobox label="Pays" options={COUNTRIES} value={val} onChange={setVal} />
        <p style={{ marginTop: 12, fontSize: 13, color: "var(--mmg-color-text-tertiary)" }}>
          Sélectionné : <strong>{val ?? "—"}</strong>
        </p>
      </div>
    );
  },
};