'use client';

import { Search } from 'lucide-react';
import { Input } from '@/components/ui/Input';
import { Patient } from '@/types/patient';

interface PatientSearchSelectProps {
  search: string;
  onSearchChange: (value: string) => void;
  patients: Patient[];
  selectedPatientId?: string;
  onSelectPatient: (patient: Patient) => void;
  loading?: boolean;
}

export function PatientSearchSelect({
  search,
  onSearchChange,
  patients,
  selectedPatientId,
  onSelectPatient,
  loading = false,
}: PatientSearchSelectProps) {
  return (
    <div className="surface-card p-4 space-y-4">
      <Input
        placeholder="Search patients by name, phone, email"
        value={search}
        onChange={(e) => onSearchChange(e.target.value)}
        icon={<Search className="h-4 w-4 icon-flat" />}
      />

      <div className="space-y-2 max-h-80 overflow-y-auto">
        {loading && <p className="text-sm text-text-muted">Loading patients...</p>}

        {!loading && patients.length === 0 && (
          <p className="text-sm text-text-muted">No patients found for this search.</p>
        )}

        {patients.map((patient) => {
          const isSelected = selectedPatientId === patient.id;
          return (
            <button
              key={patient.id}
              type="button"
              onClick={() => onSelectPatient(patient)}
              className={`w-full text-left rounded-[var(--radius-sm)] border px-3 py-2 transition-colors ${
                isSelected
                  ? 'bg-primary-soft border-primary/60'
                  : 'border-border/60 hover:bg-background-card/70'
              }`}
            >
              <p className="text-sm font-medium text-text-primary">
                {patient.firstName} {patient.lastName}
              </p>
              <p className="text-xs text-text-muted">{patient.phone || patient.email || 'No contact'}</p>
            </button>
          );
        })}
      </div>
    </div>
  );
}