import type { FormEvent } from "react";
import { Search, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

interface StockSearchFormProps {
  keyword: string;
  onKeywordChange: (value: string) => void;
  onSubmit: (event: FormEvent) => void;
  onInputFocus?: () => void;
  disabled?: boolean;
  isLoading?: boolean;
}

/**
 * @description 종목 검색 입력/제출 폼을 렌더링합니다.
 * @see features/trade/components/TradeContainer.tsx 검색 패널에서 키워드 입력 이벤트를 전달합니다.
 */
export function StockSearchForm({
  keyword,
  onKeywordChange,
  onSubmit,
  onInputFocus,
  disabled,
  isLoading,
}: StockSearchFormProps) {
  const handleClear = () => {
    onKeywordChange("");
    // 포커스 로직이 필요하다면 상위에서 ref를 전달받거나 여기서 ref를 사용해야 함.
    // 현재는 단순 값 초기화만 수행.
  };

  return (
    <form onSubmit={onSubmit} className="flex gap-2">
      {/* ========== SEARCH INPUT ========== */}
      <div className="relative flex-1">
        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground dark:text-brand-100/65" />
        <Input
          value={keyword}
          onChange={(e) => onKeywordChange(e.target.value)}
          onFocus={onInputFocus}
          placeholder="종목명 또는 종목코드(6자리)를 입력하세요."
          autoComplete="off"
          className="pl-9 pr-9 dark:border-brand-700/55 dark:bg-brand-900/28 dark:text-brand-100 dark:placeholder:text-brand-100/55"
        />
        {keyword && (
          <button
            type="button"
            onClick={handleClear}
            className="absolute right-2.5 top-2.5 text-muted-foreground hover:text-foreground dark:text-brand-100/65 dark:hover:text-brand-100"
            tabIndex={-1}
            aria-label="검색어 지우기"
          >
            <X className="h-4 w-4" />
          </button>
        )}
      </div>

      {/* ========== SUBMIT BUTTON ========== */}
      <Button type="submit" disabled={disabled || isLoading}>
        {isLoading ? "검색 중..." : "검색"}
      </Button>
    </form>
  );
}