import { Input } from "../../../../common/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../../common/components/ui/select";
import { Search, MapPin, Briefcase } from "lucide-react";

interface FilterBarProps {
  searchTerm: string;
  setSearchTerm: (value: string) => void;
  departmentFilter: string;
  setDepartmentFilter: (value: string) => void;
  locationFilter: string;
  setLocationFilter: (value: string) => void;
  departments?: string[];
  locations: string[];
}

export default function FilterBar({
  searchTerm,
  setSearchTerm,
  departmentFilter,
  setDepartmentFilter,
  locationFilter,
  setLocationFilter,
  locations
}: FilterBarProps) {
  return (
    <div className="flex flex-col shadow-none lg:flex-row items-center gap-4 w-full">
      <Input
        placeholder="Search staff by name, role, or manager..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        leadingIcon={<Search />}
        className="flex-1"
      />

      <div className="flex items-center gap-3 w-full lg:w-auto">
        <Select value={departmentFilter} onValueChange={setDepartmentFilter}>
          <SelectTrigger
            className="w-full lg:w-48 font-bold text-xs uppercase tracking-wider"
            leadingIcon={<Briefcase />}
          >
            <SelectValue placeholder="Department" />
          </SelectTrigger>
          <SelectContent className="rounded-2xl border-border glass">
            <SelectItem value="all" className="font-bold text-xs uppercase cursor-pointer">All Departments</SelectItem>
            <SelectItem value="Operations" className="font-bold text-xs uppercase cursor-pointer">Operations</SelectItem>
            <SelectItem value="Sales" className="font-bold text-xs uppercase cursor-pointer">Sales</SelectItem>
            <SelectItem value="HR" className="font-bold text-xs uppercase cursor-pointer">HR</SelectItem>
            <SelectItem value="Finance" className="font-bold text-xs uppercase cursor-pointer">Finance</SelectItem>
            <SelectItem value="IT" className="font-bold text-xs uppercase cursor-pointer">IT</SelectItem>
            <SelectItem value="Marketing" className="font-bold text-xs uppercase cursor-pointer">Marketing</SelectItem>
            <SelectItem value="Customer Service" className="font-bold text-xs uppercase cursor-pointer">Customer Service</SelectItem>
            <SelectItem value="Logistics" className="font-bold text-xs uppercase cursor-pointer">Logistics</SelectItem>
          </SelectContent>
        </Select>

        <Select value={locationFilter} onValueChange={setLocationFilter}>
          <SelectTrigger
            className="w-full lg:w-48 font-bold text-xs uppercase tracking-wider"
            leadingIcon={<MapPin />}
          >
            <SelectValue placeholder="Location" />
          </SelectTrigger>
          <SelectContent className="rounded-2xl border-border glass">
            <SelectItem value="all" className="font-bold text-xs uppercase cursor-pointer">All Locations</SelectItem>
            {locations.map(location => (
              <SelectItem key={location} value={location} className="font-bold text-xs uppercase cursor-pointer">
                {location}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}
