"use client"; import { useState, useEffect } from "react"; import { ChevronDown, ChevronUp, X, SlidersHorizontal, Search } from "lucide-react"; import { cn, FUEL_TYPES, TRANSMISSIONS, BODY_TYPES } from "@/lib/utils"; import { fetchBrands } from "@/lib/api"; import BodyTypeSilhouette from "@/components/ui/BodyTypeSilhouette"; interface Filters { brand: string[]; fuelType: string[]; transmission: string[]; bodyType: string[]; priceMin: number; priceMax: number; seating?: number; hasADAS?: boolean; ncapRating?: string; isEV?: boolean; } interface Props { filters: Filters; onChange: (f: Partial) => void; onReset: () => void; totalCount: number; } /* ── Accordion section ─────────────────────────────────────────────────────── */ function Section({ title, children, count = 0, defaultOpen = true, }: { title: string; children: React.ReactNode; count?: number; defaultOpen?: boolean; }) { const [open, setOpen] = useState(defaultOpen); const sectionId = `filter-${title.toLowerCase().replace(/\s+/g, "-")}`; return (
{open && (
{children}
)}
); } /* ── Checkbox item ─────────────────────────────────────────────────────────── */ function CheckItem({ label, checked, onChange, }: { label: string; checked: boolean; onChange: () => void; }) { return ( ); } /* ── Main sidebar ──────────────────────────────────────────────────────────── */ export default function FilterSidebar({ filters, onChange, onReset, totalCount }: Props) { const [brandSearch, setBrandSearch] = useState(""); const [showAllBrands, setShowAllBrands] = useState(false); const [brands, setBrands] = useState([]); const [brandsLoading, setBrandsLoading] = useState(true); useEffect(() => { fetchBrands() .then((res) => setBrands(res.brands ?? [])) .catch(() => { setBrands([ "Maruti Suzuki", "Hyundai", "Tata", "Mahindra", "Honda", "Toyota", "Kia", "MG", "Skoda", "Volkswagen", "Renault", "Jeep", "Mercedes-Benz", "BMW", "Audi", ]); }) .finally(() => setBrandsLoading(false)); }, []); const visibleBrands = brandSearch ? brands.filter((b) => b.toLowerCase().includes(brandSearch.toLowerCase())) : showAllBrands ? brands : brands.slice(0, 8); const activeCount = filters.brand.length + filters.fuelType.length + filters.transmission.length + filters.bodyType.length + (filters.priceMin > 0 || filters.priceMax < 200 ? 1 : 0) + (filters.seating ? 1 : 0) + (filters.hasADAS ? 1 : 0) + (filters.ncapRating ? 1 : 0) + (filters.isEV ? 1 : 0); function toggle(key: keyof Filters, val: string) { const cur = filters[key] as string[]; onChange({ [key]: cur.includes(val) ? cur.filter((v) => v !== val) : [...cur, val] }); } return ( ); }