import { ChevronDown } from "lucide-react";
import type { ReactNode } from "react";

type AdvancedOptionsPanelProps = {
  title?: ReactNode;
  summary?: ReactNode;
  children: ReactNode;
  defaultOpen?: boolean;
  className?: string;
};

function joinClasses(...classes: Array<string | undefined | false>) {
  return classes.filter(Boolean).join(" ");
}

export default function AdvancedOptionsPanel({
  title = "Advanced options",
  summary,
  children,
  defaultOpen = false,
  className = ""
}: AdvancedOptionsPanelProps) {
  return (
    <details className={joinClasses("advanced-options-panel", className)} open={defaultOpen}>
      <summary>
        <span>{title}</span>
        <ChevronDown size={16} aria-hidden="true" />
      </summary>
      {summary && <p className="advanced-options-summary">{summary}</p>}
      <div className="advanced-options-body">{children}</div>
    </details>
  );
}
