import { ReactNode } from "react";
import { Card, Button } from "react-bootstrap";

type FilterSidebarProps = {
  children: ReactNode;
  onReset?: () => void;
  loading?: boolean;
};

export default function FilterSidebar({ children, onReset, loading }: FilterSidebarProps) {
  return (
    <Card className="shadow-sm">
      <Card.Body className="d-flex flex-column gap-2">
        {children}
        {onReset && (
          <div className="border-top pt-2 mt-1">
            <Button
              variant="outline-secondary"
              size="sm"
              className="w-100"
              onClick={onReset}
              disabled={loading}
            >
              Reset all filters
            </Button>
          </div>
        )}
      </Card.Body>
    </Card>
  );
}
