"use client";
import { useState, useEffect } from "react";
import { FilterCategory } from "./filterTypes";

type Props = {
  filters: FilterCategory[];
};

export default function FilterAccordion({ filters }: Props) {
  // Open the first filter section by default
  const [openId, setOpenId] = useState<string | null>(null);

  useEffect(() => {
    if (filters.length > 0) {
      setOpenId(filters[0].id);
    }
  }, [filters]);

  const toggleAccordion = (id: string) => {
    setOpenId((prev) => (prev === id ? null : id));
  };

  return (
    <>
      <div className="flex flex-col border-t-1">
        {filters.map((filter) => {
          const isOpen = openId === filter.id;
          return (
            <div key={filter.id} className="flex flex-col border-b-1">
              <button
                onClick={() => toggleAccordion(filter.id)}
                className="flex w-full items-center justify-between py-0.5 text-xs font-medium uppercase"
              >
                <span>{filter.title}</span>
                <span className="text-lg font-normal">
                  {isOpen ? "-" : "+"}
                </span>
              </button>

              {isOpen && (
                <div className="pb-2">
                  {filter.options.map((option) => (
                    <label
                      key={option.value}
                      className="flex py-1 text-xs font-medium"
                    >
                      <input
                        type="checkbox"
                        className="mr-2 appearance-auto rounded-none accent-gray-950"
                      />
                      {option.label}
                    </label>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>
      <div className="flex flex-col items-center justify-center gap-4">
        <button className="btn-outline w-full" type="button">
          Show 14 Results
        </button>
        <button className="btn-link" type="button">
          Clear All
        </button>
      </div>
    </>
  );
}