import { useState } from "react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
export const RoomsAndBathroomsFilter = () => {
const [rooms, setRooms] = useState("");
const [bathrooms, setBathrooms] = useState("");
const displayValue = () => {
if (rooms && bathrooms) {
return `${rooms} غ / ${bathrooms} ح`;
}
if (rooms) {
return `${rooms} غرف`;
}
if (bathrooms) {
return `${bathrooms} حمامات`;
}
return "غرف / حمامات";
};
return (
{displayValue()}
غرف
1
2
3
4
5+
حمامات
1
2
3
4
5+
);
};
export const PriceRangeFilter = () => {
const [minPrice, setMinPrice] = useState("");
const [maxPrice, setMaxPrice] = useState("");
const displayValue = () => {
const fmt = (v: string) => Number(v).toLocaleString();
if (minPrice && maxPrice) return `من ${fmt(minPrice)} إلى ${fmt(maxPrice)}`;
if (minPrice) return `من ${fmt(minPrice)}`;
if (maxPrice) return `إلى ${fmt(maxPrice)}`;
return "السعر";
};
return (
{displayValue()}
السعر الأدنى
100,000
200,000
300,000
400,000
500,000
السعر الأقصى
100,000
200,000
300,000
400,000
500,000+
);
};
export const AreaRangeFilter = () => {
const [minArea, setMinArea] = useState("");
const [maxArea, setMaxArea] = useState("");
const displayValue = () => {
if (minArea && maxArea) {
return `من ${minArea} إلى ${maxArea} م²`;
}
if (minArea) {
return `من ${minArea} م²`;
}
if (maxArea) {
return `إلى ${maxArea} م²`;
}
return "المساحة";
};
return (
{displayValue()}
المساحة الدنيا
100
200
300
400
500
المساحة القصوى
100
200
300
400
500+
);
};