import { ReactNode } from "react";
import FilterChips from "./FilterChips";

type ExplorerLayoutProps = {
  title: string;
  subtitle?: string;
  chips?: string[];
  onClearChips?: () => void;
  sidebar: ReactNode;
  children: ReactNode;
};

export default function ExplorerLayout({
  title,
  subtitle,
  chips = [],
  onClearChips,
  sidebar,
  children,
}: ExplorerLayoutProps) {
  return (
    <div>
      <div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
        <div>
          <h1 className="mb-1">{title}</h1>
          {subtitle ? <div className="text-secondary">{subtitle}</div> : null}
        </div>
        {chips.length > 0 ? (
          <FilterChips chips={chips} onClear={onClearChips} />
        ) : null}
      </div>

      <div className="row g-3">
        <div className="col-lg-3">{sidebar}</div>
        <div className="col-lg-9">{children}</div>
      </div>
    </div>
  );
}
