'use client';

import { Button } from '@/components/ui/button';
import { Questionnaire, QuestionnaireCategory } from '@/types';

interface CategoryFiltersProps {
  questionnaires: Questionnaire[];
  value: QuestionnaireCategory | null;
  onChange: (category: QuestionnaireCategory | null) => void;
}

const categories: Array<{
  value: QuestionnaireCategory;
  label: string;
}> = [
  { value: '人格', label: '人格特点' },
  { value: '情绪', label: '情绪与压力' },
  { value: '认知', label: '注意与思考' },
  { value: '睡眠', label: '睡眠' },
  { value: '职业', label: '职业兴趣' },
  { value: '心理健康', label: '综合心理健康' },
];

export function CategoryFilters({
  questionnaires,
  value,
  onChange,
}: CategoryFiltersProps) {
  const availableCategories = categories.filter((category) =>
    questionnaires.some(
      (questionnaire) => questionnaire.category === category.value,
    ),
  );

  return (
    <div className="mb-8">
      <div className="mb-3 text-sm font-medium">你想了解什么？</div>
      <div className="flex flex-wrap gap-2">
        <Button
          variant={value === null ? 'default' : 'outline'}
          size="sm"
          aria-pressed={value === null}
          onClick={() => onChange(null)}
        >
          查看全部
        </Button>
        {availableCategories.map((category) => (
          <Button
            key={category.value}
            variant={value === category.value ? 'default' : 'outline'}
            size="sm"
            aria-pressed={value === category.value}
            onClick={() => onChange(category.value)}
          >
            {category.label}
          </Button>
        ))}
      </div>
    </div>
  );
}
