'use client';

import { useCallback, useState } from 'react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { createFilter, Filters, type Filter, type FilterFieldConfig } from '@/components/ui/filters';

export default function FiltersDemo() {
  const fields: FilterFieldConfig[] = [
    {
      group: 'Basic',
      fields: [
        {
          key: 'text',
          label: 'Text',
          type: 'text',
          icon: <Type />,
          placeholder: 'Search text...',
        },
        // ... more fields
      ],
    },
  ];

  const [filters, setFilters] = useState<Filter[]>([
    createFilter('priority', 'contains', ['low', 'medium', 'critical']),
  ]);

  const handleFiltersChange = useCallback((filters: Filter[]) => {
    setFilters(filters);
  }, []);

  return (
    <div className="flex items-start gap-2.5">
      <Filters filters={filters} fields={fields} variant="outline" onChange={handleFiltersChange} />
      {filters.length > 0 && (
        <Button variant="outline" onClick={() => setFilters([])}>
          Clear
        </Button>
      )}
    </div>
  );
}