"use client";
import React from "react";
import StyledSelect from "../common/StyledSelect";

interface BasicAgentFiltersProps {
  agentType: string;
  onAgentTypeChange: (type: string) => void;
  city: string;
  onCityChange: (city: string) => void;
  searchValue: string;
  onSearchChange: (value: string) => void;
}

export default function BasicAgentFilters({
  agentType,
  onAgentTypeChange,
  city,
  onCityChange,
  searchValue,
  onSearchChange,
}: BasicAgentFiltersProps) {
  return (
    <div className="flex flex-col md:flex-row gap-4 items-center w-full">
      <div className="relative w-full md:flex-1">
        <input
          type="text"
          placeholder="ابحث باسم العقاري"
          value={searchValue}
          onChange={(e) => onSearchChange(e.target.value)}
          className="w-full rounded-full border border-[#CAD5E2] bg-[#F8FAFC] py-2.5 px-6 text-right leading-tight text-slate-700 placeholder-slate-400 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-200"
        />
      </div>
      <div className="w-full md:w-auto">
        <StyledSelect
          value={city}
          onChange={(e) => onCityChange(e.target.value)}
          className="w-full md:w-48"
        >
          <option value="">المدينة</option>
          <option value="الرياض">الرياض</option>
          <option value="جدة">جدة</option>
          <option value="الدمام">الدمام</option>
        </StyledSelect>
      </div>
      <div className="flex items-center gap-5 rtl:space-x-reverse">
        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="radio"
            name="agentType"
            value="marketer"
            checked={agentType === "marketer"}
            onChange={() => onAgentTypeChange("marketer")}
            className="peer h-4 w-4 appearance-none rounded-full border-2 border-[#E5E5E5] focus:outline-none focus:ring-0 focus:ring-offset-0 transition-all duration-200 checked:border-[#E5E5E5] checked:bg-[#E5E5E5]"
          />
          <span className="text-[#1D293D] text-base">مسوق عقاري</span>
        </label>
        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="radio"
            name="agentType"
            value="company"
            checked={agentType === "company"}
            onChange={() => onAgentTypeChange("company")}
            className="peer h-4 w-4 appearance-none rounded-full border-2 border-[#E5E5E5] focus:outline-none focus:ring-0 focus:ring-offset-0 transition-all duration-200 checked:border-[#E5E5E5] checked:bg-[#E5E5E5]"
          />
          <span className="text-[#1D293D] text-base">شركة عقارية</span>
        </label>
      </div>
    </div>
  );
}