CheckboxSelect

'use client';

import { useState } from 'react';
import { CheckboxSelect } from '@/ui/forms/CheckboxSelect';

const statusOptions = [
  { value: 'open', label: 'Open' },
  { value: 'fixed', label: 'Fixed' },
  { value: 'in-progress', label: 'In Progress' },
  { value: 'closed', label: 'Closed' },
];

export function CheckboxSelectDemo() {
  const [status, setStatus] = useState<string[]>(['open']);
  const [categories, setCategories] = useState<string[]>([]);

  return (
    <div className="space-y-24" style={{ minWidth: 300 }}>
      <CheckboxSelect
        label="Status"
        placeholder="Select statuses..."
        options={statusOptions}
        value={status}
        onChange={(_, v) => setStatus(v)}
      />

      <CheckboxSelect
        label="Category"
        placeholder="Select categories..."
        groups={[
          {
            label: 'Travel',
            options: [
              { value: 'flight', label: 'Flight' },
              { value: 'hotel', label: 'Hotel' },
            ],
          },
          {
            label: 'Activities',
            options: [
              { value: 'ski', label: 'Ski' },
              { value: 'golf', label: 'Golf' },
              { value: 'spa', label: 'Spa' },
            ],
          },
        ]}
        value={categories}
        onChange={(_, v) => setCategories(v)}
        renderValue={(vals) => `${vals.length} selected`}
      />

      <CheckboxSelect
        label="Priority"
        options={[
          { value: 'high', label: 'High' },
          { value: 'medium', label: 'Medium' },
          { value: 'low', label: 'Low' },
        ]}
        validationStatus="error"
        errorMessage="Please select at least one priority"
      />

      <CheckboxSelect label="Tags" options={statusOptions} value={['open']} disabled />
    </div>
  );
}