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

const AreaRangeInput = ({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">
        <Input
          placeholder="من"
          className={`border-none rounded-none focus-visible:ring-0 text-right w-full py-3 bg-transparent shadow-none placeholder:text-${inputsPlaceholderColor}`}
        />
      </div>
      <div className="border-l h-6"></div>
      <div className="relative flex items-center">
        <Input
          placeholder="الى"
          className={`border-none rounded-none focus-visible:ring-0 text-right w-full py-3 bg-transparent shadow-none placeholder:text-${inputsPlaceholderColor}`}
        />
      </div>
    </div>
  );
};

export default AreaRangeInput;