import type { HTMLAttributes, ReactNode } from "react";

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

export const commonSearchFilterBarRowClass =
  "flex flex-col gap-3 md:flex-row md:items-center md:justify-between";
export const commonSearchFilterBarPrimaryClass =
  "flex min-w-0 flex-1 flex-col gap-3 md:flex-row md:items-center";
export const commonSearchFilterBarActionsClass =
  "flex flex-wrap items-center gap-2";
export const commonSearchFilterBarAdvancedClass =
  "flex flex-col gap-4 rounded-lg border border-border/40 bg-secondary/30 p-4 animate-in fade-in slide-in-from-top-2 duration-200";

type SearchFilterBarProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
  actions?: ReactNode;
  advanced?: ReactNode;
  advancedOpen?: boolean;
  primary: ReactNode;
};

export function SearchFilterBar({
  actions,
  advanced,
  advancedOpen = false,
  className,
  primary,
  ...props
}: SearchFilterBarProps) {
  return (
    <div className={cx("space-y-3", className)} {...props}>
      <div className={commonSearchFilterBarRowClass}>
        <div className={commonSearchFilterBarPrimaryClass}>{primary}</div>
        {actions ? (
          <div className={commonSearchFilterBarActionsClass}>{actions}</div>
        ) : null}
      </div>
      {advanced && advancedOpen ? (
        <div className={commonSearchFilterBarAdvancedClass}>{advanced}</div>
      ) : null}
    </div>
  );
}