import { CalendarDays, MapPin, Search, Users } from "lucide-react";

export function SearchBar({ compact = false }: { compact?: boolean }) {
  return (
    <form action="/listings" className={`grid items-center gap-2 rounded-2xl bg-white p-2 shadow-lift ${compact ? "md:grid-cols-[1.4fr_1fr_1fr_auto]" : "md:grid-cols-[1.5fr_1fr_1fr_auto]"}`}>
      <label className="flex items-center gap-3 rounded-xl px-4 py-3 hover:bg-muted">
        <MapPin className="text-ember" size={19} />
        <span className="min-w-0 flex-1"><span className="block text-xs font-bold">Where</span><input name="q" aria-label="Destination" placeholder="Search destinations" className="w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground" /></span>
      </label>
      <label className="flex items-center gap-3 rounded-xl px-4 py-3 hover:bg-muted">
        <CalendarDays className="text-ember" size={19} />
        <span><span className="block text-xs font-bold">When</span><input type="date" name="date" aria-label="Check-in date" className="w-full bg-transparent text-sm text-muted-foreground outline-none" /></span>
      </label>
      <label className="flex items-center gap-3 rounded-xl px-4 py-3 hover:bg-muted">
        <Users className="text-ember" size={19} />
        <span><span className="block text-xs font-bold">Guests</span><select name="guests" aria-label="Guests" className="bg-transparent text-sm text-muted-foreground outline-none"><option value="1">1 guest</option><option value="2">2 guests</option><option value="4">4 guests</option><option value="6">6 guests</option></select></span>
      </label>
      <button className="flex h-13 items-center justify-center gap-2 rounded-xl bg-gradient-ember px-6 font-bold text-white shadow-ember" type="submit"><Search size={18} /><span className="md:hidden lg:inline">Search</span></button>
    </form>
  );
}