The Checkbox Group

"use client";

import { useState } from "react";
import {
  CheckboxGroup,
  type CheckboxGroupOption,
} from "@/components/ui/checkbox-group";

const options: CheckboxGroupOption[] = [
  {
    group: "Pressing",
    label: "High press",
    value: "press",
    description: "Close the alley when they receive on the turn",
  },
  {
    group: "Pressing",
    label: "Hold the half-spaces",
    value: "halfspaces",
    description: "Narrow tens, full-backs hold the width",
  },
  {
    group: "Pressing",
    label: "Back-three rehearsal",
    value: "backthree",
    description: "Not on the teamsheet for Saturday",
    disabled: true,
    disabledReason: "Available after the squad list is published.",
  },
  {
    group: "Set pieces",
    label: "Near-post corner trap",
    value: "corner-trap",
    description: "Front zone clear, weak-side winger seals the rebound lane",
  },
  {
    group: "Set pieces",
    label: "Late-run overload",
    value: "late-run",
    description: "Delay the extra runner until the second movement starts",
  },
];

export function CheckboxGroupPreview() {
  const [value, setValue] = useState<string[]>(["press"]);

  return (
    <div className="flex min-h-screen items-center justify-center p-4">
      <CheckboxGroup
        className="max-w-md"
        onChange={setValue}
        options={options}
        value={value}
      />
    </div>
  );
}

export default CheckboxGroupPreview;