"use client";

import { ReactNode, useState } from "react";
import { Collapse } from "react-bootstrap";
import { ChevronDown } from "react-bootstrap-icons";

type FilterSectionProps = {
  label: string;
  badge?: string;
  defaultOpen?: boolean;
  children: ReactNode;
};

export default function FilterSection({
  label,
  badge,
  defaultOpen = true,
  children,
}: FilterSectionProps) {
  const [open, setOpen] = useState(defaultOpen);

  return (
    <div className="border-bottom pb-2">
      <button
        type="button"
        className="btn btn-sm w-100 d-flex align-items-center justify-content-between p-0 text-start"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
      >
        <span className="form-label small text-secondary mb-0 fw-semibold">{label}</span>
        <span className="d-flex align-items-center gap-1">
          {!open && badge && (
            <span className="badge text-bg-primary rounded-pill" style={{ fontSize: "0.7rem" }}>
              {badge}
            </span>
          )}
          <ChevronDown
            size={10}
            className="text-secondary"
            style={{
              transition: "transform 0.2s",
              transform: open ? "rotate(180deg)" : "rotate(0deg)",
            }}
          />
        </span>
      </button>
      <Collapse in={open}>
        <div>
          <div className="mt-1">{children}</div>
        </div>
      </Collapse>
    </div>
  );
}
