interface Props {
  valeur: string
  onChange: (v: string) => void
}

export default function RechercheMetier({ valeur, onChange }: Props) {

  return (

    <div className="max-w-2xl mx-auto">

      <div className="relative">

        <span className="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
          search
        </span>

        <input
          value={valeur}
          onChange={(e) => onChange(e.target.value)}
          placeholder="Rechercher un métier..."
          className="w-full pl-12 pr-4 py-4 border rounded-xl focus:ring-2 focus:ring-primary outline-none"
        />

      </div>

    </div>
  )
}