// Components/Policy/PolicyFilters.jsx
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFilter, faRotateLeft, faListCheck } from "@fortawesome/free-solid-svg-icons";

export default function PolicyFilters({
  query,
  onQuery,
  dateFrom,
  onDateFrom,
  dateTo,
  onDateTo,
  onReset,
  onFilter,
  onList,
}) {
  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-12 gap-3">
        <div className="lg:col-span-4">
          <label className="text-xs font-semibold text-black/55">Arama</label>
          <input
            value={query}
            onChange={(e) => onQuery(e.target.value)}
            placeholder="Ünvan / Poliçe No / Plaka / Sigortalı..."
            className="mt-1 w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-sm outline-none focus:ring-4 focus:ring-red-500/10 focus:border-red-500/30 transition"
          />
        </div>

        <div className="lg:col-span-2">
          <label className="text-xs font-semibold text-black/55">Başlama</label>
          <input
            type="date"
            value={dateFrom}
            onChange={(e) => onDateFrom(e.target.value)}
            className="mt-1 w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-sm outline-none focus:ring-4 focus:ring-red-500/10 focus:border-red-500/30 transition"
          />
        </div>

        <div className="lg:col-span-2">
          <label className="text-xs font-semibold text-black/55">Bitiş</label>
          <input
            type="date"
            value={dateTo}
            onChange={(e) => onDateTo(e.target.value)}
            className="mt-1 w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-sm outline-none focus:ring-4 focus:ring-red-500/10 focus:border-red-500/30 transition"
          />
        </div>

        <div className="lg:col-span-4 flex items-end gap-2">
          <button
            onClick={onReset}
            className="flex-1 cursor-pointer inline-flex items-center justify-center gap-2 rounded-2xl border border-black/10 bg-white px-4 py-3 text-sm font-semibold text-black/70 hover:bg-black/[0.03] transition"
          >
            <FontAwesomeIcon icon={faRotateLeft} />
            Temizle
          </button>

          <button
            onClick={onFilter}
            className="flex-1 cursor-pointer inline-flex items-center justify-center gap-2 rounded-2xl border border-black/10 bg-white px-4 py-3 text-sm font-semibold text-black/70 hover:bg-black/[0.03] transition"
          >
            <FontAwesomeIcon icon={faFilter} />
            Filtre
          </button>

          <button
            onClick={onList}
            className="flex-1 cursor-pointer inline-flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-red-600 to-red-500 px-4 py-3 text-sm font-semibold text-white shadow-lg shadow-red-600/15 hover:brightness-[1.02] active:scale-[0.99] transition"
          >
            <FontAwesomeIcon icon={faListCheck} />
            Listele
          </button>
        </div>
      </div>
    </div>
  );
}