"use client";

import type { FormEvent, ReactNode } from "react";
import { Button } from "@/components/Button";
import { fieldClassName } from "@/components/ui/field-styles";
import { cn } from "@/lib/cn";

export const adminFilterInputClassName = cn(
  fieldClassName,
  "h-9 rounded-[10px] border-line/80 bg-surface",
);

export function AdminFilterBar({
  children,
  onSubmit,
  onReset,
  disabled,
}: {
  children: ReactNode;
  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
  onReset?: () => void;
  disabled?: boolean;
}) {
  return (
    <form
      onSubmit={onSubmit}
      className="rounded-[10px] border border-line/80 bg-surface p-3.5 shadow-pv sm:p-4"
    >
      <div className="flex flex-col gap-3 lg:flex-row lg:flex-wrap lg:items-end">
        {children}
        <div className="flex gap-2 lg:ml-auto lg:shrink-0">
          <Button type="submit" size="sm" disabled={disabled}>
            Apply
          </Button>
          {onReset ? (
            <Button type="button" variant="secondary" size="sm" onClick={onReset} disabled={disabled}>
              Reset
            </Button>
          ) : null}
        </div>
      </div>
    </form>
  );
}

export function AdminFilterField({
  label,
  children,
  className,
}: {
  label: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <label className={cn("flex min-w-[11rem] flex-1 flex-col gap-1.5", className)}>
      <span className="text-[0.6875rem] font-medium uppercase tracking-[0.06em] text-ink-40">
        {label}
      </span>
      {children}
    </label>
  );
}