"use client";
import { useState } from "react";

type FilterProps = {
  categories: string[];
  selectedCategories: string[];
  onChange: (category: string[]) => void;
};

export default function Filters({
  categories,
  selectedCategories,
  onChange,
}: FilterProps) {
  const toggleCategory = (cat: string) => {
    const updated = selectedCategories.includes(cat)
      ? selectedCategories.filter((c) => c !== cat)
      : [...selectedCategories, cat];
    onChange(updated);
  };

  return (
    <div className="space-y-2">
      {categories.map((cat, index) => (
        <div key={`${cat}_${index}`} className="flex flex-row gap-1">
          <input
            type="checkbox"
            id={`${cat}_${index}`}
            checked={selectedCategories.includes(cat)}
            onChange={() => toggleCategory(cat)}
            className="appearance-auto"
          />
          <label
            htmlFor={`${cat}_${index}`}
            className="flex items-center gap-2"
          >
            {cat}
          </label>
        </div>
      ))}
    </div>
  );
}