import Image from "next/image";
import { Input } from "@/components/ui/input";

const PriceRangeInput = ({inputsPlaceholderColor, classNames}: {inputsPlaceholderColor?: string, classNames?: string}) => {
  return (
    <div className={`flex items-center rounded-full border w-full border-input py-1 bg-transparent text-slate-400 ${classNames}`}>
      <div className="relative flex items-center flex-1">
        <Input
          placeholder="من"
          className={`border-none rounded-none focus-visible:ring-0 pl-10 text-right w-full bg-transparent shadow-none placeholder:text-${inputsPlaceholderColor}`}
        />
        <Image
          src="/icons/saudi-riyal-symbol.svg"
          alt="SAR"
          width={16}
          height={16}
          className="absolute left-3"
        />
      </div>
      <div className="border-l h-6"></div>
      <div className="relative flex items-center flex-1">
        <Input
          placeholder="الى"
          className={`border-none rounded-none focus-visible:ring-0 pl-10 text-right w-full bg-transparent shadow-none placeholder:text-${inputsPlaceholderColor}`}
        />
        <Image
          src="/icons/saudi-riyal-symbol.svg"
          alt="SAR"
          width={16}
          height={16}
          className="absolute left-3"
        />
      </div>
    </div>
  );
};

export default PriceRangeInput;