"use client";

import { Search, Filter } from "lucide-react";

export default function SearchFilters() {
  return (
    <section className="max-w-6xl mx-auto px-4 -mt-12 relative z-10">
      <div className="bg-white/95 backdrop-blur-sm border border-[#428B4D]/15 p-6 rounded-lg shadow-xl shadow-[#428B4D]/5 grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="relative">
          <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
          <input
            type="text"
            placeholder="Search jobs..."
            className="w-full pl-11 pr-4 py-3 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#428B4D]/20 focus:border-[#428B4D] transition-all duration-200 text-sm"
          />
        </div>

        <div className="relative">
          <Filter className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400 pointer-events-none" />
          <select className="w-full pl-11 pr-4 py-3 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#428B4D]/20 focus:border-[#428B4D] transition-all duration-200 text-sm appearance-none bg-white cursor-pointer">
            <option>Department</option>
            <option>Engineering</option>
            <option>Design</option>
            <option>Marketing</option>
            <option>Product</option>
          </select>
        </div>

        <select className="w-full px-4 py-3 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#428B4D]/20 focus:border-[#428B4D] transition-all duration-200 text-sm appearance-none bg-white cursor-pointer">
          <option>Location</option>
          <option>Dubai</option>
          <option>Riyadh</option>
          <option>Remote</option>
        </select>

        <select className="w-full px-4 py-3 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#428B4D]/20 focus:border-[#428B4D] transition-all duration-200 text-sm appearance-none bg-white cursor-pointer">
          <option>Job Type</option>
          <option>Full-time</option>
          <option>Part-time</option>
          <option>Remote</option>
        </select>
      </div>
    </section>
  );
}