"use client";

import { FormEvent, ReactNode } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

// 기존 JSP 검색 폼 영역 대응 (plm_schArea)
interface SearchFormProps {
  onSearch: (formData: FormData) => void;
  onReset?: () => void;
  children: ReactNode;
  className?: string;
}

export function SearchForm({ onSearch, onReset, children, className }: SearchFormProps) {
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    onSearch(formData);
  };

  return (
    <form onSubmit={handleSubmit} className={cn("bg-white rounded-lg border border-gray-200 p-4 mb-4", className)}>
      <div className="flex flex-wrap gap-3 items-end">
        {children}
        {onReset && (
          <div className="flex gap-2 ml-auto">
            <Button type="button" variant="secondary" size="sm" onClick={onReset}>
              초기화
            </Button>
          </div>
        )}
      </div>
      {/* Enter 키 submit 유지용 (시각적 숨김) */}
      <button type="submit" className="sr-only" aria-hidden="true" tabIndex={-1}>검색</button>
    </form>
  );
}

// 검색 필드 래퍼
export function SearchField({
  label,
  children,
  className,
}: {
  label: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <div className={cn("flex flex-col gap-1", className)}>
      <label className="text-xs font-medium text-gray-500">{label}</label>
      {children}
    </div>
  );
}
