// components/users/UsersFilters.jsx
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";

export default function UsersFilters({
  query,
  onQuery,
  roleFilter,
  onRole,
  total,
}) {
  return (
    <div className="mt-6 rounded-3xl border border-black/10 bg-white p-4 sm:p-5 shadow-sm">
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
        <div className="relative">
          <span className="absolute left-4 top-1/2 -translate-y-1/2 text-black/35">
            <FontAwesomeIcon icon={faMagnifyingGlass} />
          </span>
          <input
            value={query}
            onChange={(e) => onQuery(e.target.value)}
            placeholder="Ara: ID veya isim..."
            className="w-full rounded-2xl border border-black/10 bg-white pl-11 pr-4 py-3 text-sm outline-none focus:ring-4 focus:ring-[#e04a3b]/10 focus:border-[#e04a3b]/30 transition"
          />
        </div>

        <select
          value={roleFilter}
          onChange={(e) => onRole(e.target.value)}
          className="w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-sm outline-none focus:ring-4 focus:ring-[#e04a3b]/10 focus:border-[#e04a3b]/30 transition"
        >
          <option value="all">Tüm Roller</option>
          <option value="1">1 — Yönetici</option>
          <option value="2">2 — Kullanıcı</option>
        </select>

        <div className="flex items-center justify-between rounded-2xl border border-black/10 bg-white px-4 py-3">
          <div className="text-sm text-black/60">Toplam</div>
          <div className="text-sm font-bold text-black/80">{total}</div>
        </div>
      </div>
    </div>
  );
}