import React from "react";
import BoldIcon from "@/components/ui/BoldIcon";

interface SearchInpValue {
    Placeholder: string;
    value: string;
    onChange: (value: string) => void;
  }
  
  export default function SearchInp({ Placeholder, value, onChange }: SearchInpValue) {
    return (
      <div className="relative flex flex-col w-full text-xl max-w-[1227px] mx-auto">
        <input
          type="text"
          placeholder={Placeholder}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          className="w-full max-tablet-l:h-9  max-desktop-s:text-sm h-16  max-desktop-s:h-12 flex justify-center items-center ltr:pl-12  ltr:pr-4 rtl:pr-12 rtl:pl-4 py-2 rounded-full shadow-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-neutral-800 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300"
        />
        <div className="absolute ltr:right-1 rtl:left-1 rtl:rotate-180 cursor-pointer top-1/2 transform rounded-full bg-cyan-500 dark:bg-neutral-500 size-14 max-desktop-s:size-10 max-tablet-l:size-8 flex justify-center items-center  -translate-y-1/2 text-white dark:text-gray-300 ">
          <BoldIcon name="arrow-right-2" size={24} tinted className="text-white" />
        </div>
        <BoldIcon name="search-normal" size={20} className="absolute max-desktop-s:!size-5 ltr:left-4 rtl:right-4 top-1/2 -translate-y-1/2 opacity-60 dark:invert" />
      </div>
    );
  }
  
