import type { FormEvent } from "react";
import { Search } 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/dashboard/components/DashboardContainer.tsx 검색 패널에서 키워드 입력 이벤트를 전달합니다.
 */
export function StockSearchForm({
  keyword,
  onKeywordChange,
  onSubmit,
  onInputFocus,
  disabled,
  isLoading,
}: StockSearchFormProps) {
  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 dark:border-brand-700/55 dark:bg-brand-900/28 dark:text-brand-100 dark:placeholder:text-brand-100/55"
        />
      </div>

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