autocomplete.tsx

import * as React from "react"

import { cn } from "@/lib/utils"
import { AutoComplete, Option } from "./autocomplete"

// Simulated API call
const searchCountries = async (query: string): Promise<Option[]> => {
  // This would be replaced with an actual API call in a real application
  const allCountries: Option[] = [
    { value: 'fr', label: 'France' },
    { value: 'de', label: 'Germany' },
    { value: 'it', label: 'Italy' },
    { value: 'es', label: 'Spain' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'us', label: 'United States' },
  ];

  // Simulate API delay
  await new Promise(resolve => setTimeout(resolve, 500));

  return allCountries.filter(country => 
    country.label.toLowerCase().includes(query.toLowerCase())
  );
};

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => {
    const [selectedCountry, setSelectedCountry] = React.useState<Option | undefined>();

    const handleSearch = async (query: string) => {
      return await searchCountries(query);
    };

    return (
      <>
        <AutoComplete
          options={[]}
          onSearch={handleSearch}
          value={selectedCountry}
          onValueChange={setSelectedCountry}
          placeholder="Start typing a country name..."
          emptyMessage="No countries found"
          minChars={2}
        />


        <input
          type={type}
          className={cn(
            "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
            className
          )}
          ref={ref}
          {...props}
          />
      </>
    )
  }
)
Input.displayName = "Input"

export { Input }