"use client";

import { Search } from "lucide-react";
import type { ChangeEvent, FormEvent, KeyboardEvent } from "react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";

type CustomerSearchCardProps = {
  searchInput: string;
  onSearchInputChange: (value: string) => void;
  isSearchingCustomer: boolean;
  onSearchSubmit: (e: FormEvent) => void;
  onSearchKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
};

export function CustomerSearchCard({
  searchInput,
  onSearchInputChange,
  isSearchingCustomer,
  onSearchSubmit,
  onSearchKeyDown,
}: CustomerSearchCardProps) {
  return (
    <Card className="rounded-xl border-slate-200/80 bg-white shadow-sm">
      <CardHeader className="pb-2">
        <CardTitle className="text-lg font-semibold text-slate-900">
          Gestión de Reclamos
        </CardTitle>
        <CardDescription>
          Busca por servicio de clientes (RUT o Nombre); luego se carga el contexto de reclamos
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form
          className="flex flex-col gap-3 sm:flex-row sm:items-center"
          onSubmit={onSearchSubmit}
        >
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
            <Input
              className="h-11 rounded-xl border-slate-200 pl-10 shadow-sm"
              placeholder="Busca por RUT o Nombre..."
              value={searchInput}
              onChange={(e: ChangeEvent<HTMLInputElement>) =>
                onSearchInputChange(e.target.value)
              }
              onKeyDown={onSearchKeyDown}
            />
          </div>
          <Button
            className="h-11 rounded-xl bg-blue-600 hover:bg-blue-700 shadow-sm"
            disabled={isSearchingCustomer}
            type="submit"
          >
            {isSearchingCustomer ? "Buscando…" : "Buscar"}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}