'use client'

import React, { useEffect, useState } from 'react'

import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuItem } from '@/components/ui/dropdown-menu'

import { AdjustmentsHorizontalIcon } from '@heroicons/react/24/outline'
import { CaretDownIcon } from '@radix-ui/react-icons'
import { Button } from '../ui/button'


type Props = {
  backgroundColor: string

  fontSize: string

}


const SearchSection = ({ backgroundColor, fontSize }: Props) => {
  const [selectedValue, setSelectedValue] = useState('select')


  return (
    <div className={` w-11/12 md:w-3/4  max-w-full 3xl:max-w-[60%]   ${backgroundColor} flex flex-col items-center  gap-1 pb-12  md:gap-12  mt-6 pt-10 px-2 md:px-5`}>

      <h1 className={`text-bold text-2xl md:${fontSize} leading-8 md:leading-10 capitalize font-bold  text-center `}>
        Find Or Search The Mentor For Your Vision{' '}
      </h1>

      {/* Search Input */}

      <div className="flex w-11/12  self-center  border-b-2 items-center border-[#DDDDDD] border-solid  pb-1 mt-2 md:mt-auto  md:pb-3 px-2 md:px-9  gap-6 ">
        {/*  search Icon */}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
          fill="none"
        >
          <path
            d="M14.6667 25.3333C20.5577 25.3333 25.3333 20.5577 25.3333 14.6667C25.3333 8.77563 20.5577 4 14.6667 4C8.77563 4 4 8.77563 4 14.6667C4 20.5577 8.77563 25.3333 14.6667 25.3333Z"
            stroke="#0072B1"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          <path
            d="M28.0014 27.9998L22.2014 22.1998"
            stroke="#0072B1"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>

        <input
          type="text"
          className="w-full bg-inherit outline-none  "
          placeholder="Search by name or keyword"
        />

        <AdjustmentsHorizontalIcon className="w-7 h-7" />
      </div>

      {/*  Dropdowns */}

      <div className="flex flex-col">
        {/* <div className="flex  py-2 px-4 items-center rounded-xl border border-solid border-[#ffffff1a] gap-6 justify-between md:gap-12  bg-[#F2F2F2]   "> */}

        {/* <select
          onChange={(e) => setSelectedValue(e.target.value)}
          value={selectedValue}
          className="w-[150px] border-gray-300 flex py-2 px-8 items-center rounded-xl border border-solid gap-6 justify-between md:gap-3 bg-gray-200 hover:bg-blue-500 focus:bg-blue-500 focus:text-white active:bg-blue-200 outline-none "
          defaultValue="select"
        >
          <option
            value="select"
            className="hover:bg-none hover:bg-white  border-gray-500  border-2"
          >
            Select
          </option>
          <option value="Edit">Edit</option>
          <option value="Duplicate">Duplicate</option>
        </select> */}
        <div className=' hidden md:flex  flex-col md:flex-row gap-4 justify-center w-full mt-4 ' >
          <DropdownMenu>
            <DropdownMenuTrigger className=" rounded-xl flex items-center gap-4 lg:gap-12 2xl:gap-24 px-6 py-2 focus:bg-[#0072B1] active:bg-[#0072B1] focus:text-white bg-gray-200 text-[#111111] ">
              Options
              <CaretDownIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent className=' rounded-xl flex   bg-gray-200 text-[#111111] flex-col items-center gap-4 w-52 ' >
              <DropdownMenuItem className='  hover:bg-[#0072B1] hover:text-white focus:bg-[#0072B1]  focus:text-white 
   px-24  ' >Edit</DropdownMenuItem>
              <DropdownMenuItem className='  hover:bg-[#0072B1] focus:bg-[#0072B1] hover:text-white  focus:text-white  px-24' >Duplicate</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          <DropdownMenu>
            <DropdownMenuTrigger className=" rounded-xl flex items-center gap-4 lg:gap-12 2xl:gap-24 px-6 py-2 focus:bg-[#0072B1] active:bg-[#0072B1] focus:text-white bg-gray-200 text-[#111111] ">
              Options
              <CaretDownIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent className=' rounded-xl flex   bg-gray-200 text-[#111111] flex-col items-center gap-4 w-52 ' >
              <DropdownMenuItem className='  hover:bg-[#0072B1] hover:text-white focus:bg-[#0072B1]  focus:text-white 
   px-24  ' >Edit</DropdownMenuItem>
              <DropdownMenuItem className='  hover:bg-[#0072B1] focus:bg-[#0072B1] hover:text-white  focus:text-white  px-24' >Duplicate</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          <DropdownMenu>
            <DropdownMenuTrigger className=" rounded-xl flex items-center gap-4 lg:gap-12 2xl:gap-24 px-6 py-2 focus:bg-[#0072B1] active:bg-[#0072B1] focus:text-white bg-gray-200 text-[#111111] ">
              Options
              <CaretDownIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent className=' rounded-xl flex   bg-gray-200 text-[#111111] flex-col items-center gap-4 w-52'>
              <DropdownMenuItem className='  hover:bg-[#0072B1] hover:text-white focus:bg-[#0072B1]  focus:text-white 
   px-24  ' >Edit</DropdownMenuItem>
              <DropdownMenuItem className='  hover:bg-[#0072B1] focus:bg-[#0072B1] hover:text-white  focus:text-white  px-24' >Duplicate</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>


          <DropdownMenu>
            <DropdownMenuTrigger className=" rounded-xl flex items-center gap-4 lg:gap-12 2xl:gap-24 px-6 py-2 focus:bg-[#0072B1] active:bg-[#0072B1] focus:text-white bg-gray-200 text-[#111111] " value={selectedValue}  >
              {selectedValue}
              <CaretDownIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent className=' rounded-xl flex   bg-gray-200 text-[#111111] flex-col items-center gap-4 w-52'>


              <DropdownMenuItem onClick={() => { setSelectedValue('Edit') }}
                className=' hover:bg-[#0072B1] hover:text-white focus:bg-[#0072B1]  focus:text-white 
   px-24'>


                Edit</DropdownMenuItem>

              <DropdownMenuItem onClick={(e) => { setSelectedValue('Duplicate') }} className='  hover:bg-[#0072B1] focus:bg-[#0072B1] hover:text-white  focus:text-white  px-24' >Duplicate</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>


          <DropdownMenu>
            <DropdownMenuTrigger className=" rounded-xl flex items-center gap-4 lg:gap-12 2xl:gap-24 px-6 py-2 focus:bg-[#0072B1] active:bg-[#0072B1] focus:text-white bg-gray-200 text-[#111111] " value={selectedValue}  >
              {selectedValue}
              <CaretDownIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent className=' rounded-xl flex   bg-gray-200 text-[#111111] flex-col items-center gap-4 w-52'>


              <DropdownMenuItem onClick={() => { setSelectedValue('Edit') }}
                className=' hover:bg-[#0072B1] hover:text-white focus:bg-[#0072B1]  focus:text-white 
   px-24'>
                Edit</DropdownMenuItem>

              <DropdownMenuItem onClick={(e) => { setSelectedValue('Duplicate') }} className='  hover:bg-[#0072B1] focus:bg-[#0072B1] hover:text-white  focus:text-white  px-24' >Duplicate</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
        <div className=' hidden md:flex  flex-col md:flex-row gap-4 justify-center w-full mt-4 ' >
          <DropdownMenu>
            <DropdownMenuTrigger className=" rounded-xl flex items-center gap-4 lg:gap-12 2xl:gap-24 px-6 py-2 focus:bg-[#0072B1] active:bg-[#0072B1] focus:text-white bg-gray-200 text-[#111111] ">
              Options
              <CaretDownIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent className=' rounded-xl flex   bg-gray-200 text-[#111111] flex-col items-center gap-4 w-52 ' >
              <DropdownMenuItem className='  hover:bg-[#0072B1] hover:text-white focus:bg-[#0072B1]  focus:text-white 
   px-24  ' >Edit</DropdownMenuItem>
              <DropdownMenuItem className='  hover:bg-[#0072B1] focus:bg-[#0072B1] hover:text-white  focus:text-white  px-24' >Duplicate</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          <DropdownMenu>
            <DropdownMenuTrigger className=" rounded-xl flex items-center gap-4 lg:gap-12 2xl:gap-24 px-6 py-2 focus:bg-[#0072B1] active:bg-[#0072B1] focus:text-white bg-gray-200 text-[#111111] ">
              Options
              <CaretDownIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent className=' rounded-xl flex   bg-gray-200 text-[#111111] flex-col items-center gap-4 w-52 ' >
              <DropdownMenuItem className='  hover:bg-[#0072B1] hover:text-white focus:bg-[#0072B1]  focus:text-white 
   px-24  ' >Edit</DropdownMenuItem>
              <DropdownMenuItem className='  hover:bg-[#0072B1] focus:bg-[#0072B1] hover:text-white  focus:text-white  px-24' >Duplicate</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          <DropdownMenu>
            <DropdownMenuTrigger className=" rounded-xl flex items-center gap-4 lg:gap-12 2xl:gap-24 px-6 py-2 focus:bg-[#0072B1] active:bg-[#0072B1] focus:text-white bg-gray-200 text-[#111111] ">
              Options
              <CaretDownIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent className=' rounded-xl flex   bg-gray-200 text-[#111111] flex-col items-center gap-4 w-52 ' >
              <DropdownMenuItem className='  hover:bg-[#0072B1] hover:text-white focus:bg-[#0072B1]  focus:text-white 
   px-24  ' >Edit</DropdownMenuItem>
              <DropdownMenuItem className='  hover:bg-[#0072B1] focus:bg-[#0072B1] hover:text-white  focus:text-white  px-24' >Duplicate</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>


          <DropdownMenu>
            <DropdownMenuTrigger className=" rounded-xl flex items-center gap-4 lg:gap-12 2xl:gap-24 px-6 py-2 focus:bg-[#0072B1] active:bg-[#0072B1] focus:text-white bg-gray-200 text-[#111111] " value={selectedValue}  >
              {selectedValue}
              <CaretDownIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent className=' rounded-xl flex   bg-gray-200 text-[#111111] flex-col items-center gap-4 w-52   '    >


              <DropdownMenuItem onClick={() => { setSelectedValue('Edit') }}
                className=' hover:bg-[#0072B1] hover:text-white focus:bg-[#0072B1]  focus:text-white 
   px-24 ' >


                Edit</DropdownMenuItem>

              <DropdownMenuItem onClick={(e) => { setSelectedValue('Duplicate') }} className='  hover:bg-[#0072B1] focus:bg-[#0072B1] hover:text-white  focus:text-white  px-24' >Duplicate</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>


          <DropdownMenu>
            <DropdownMenuTrigger className=" rounded-xl flex items-center gap-4 lg:gap-12 2xl:gap-24 px-6 py-2 focus:bg-[#0072B1] active:bg-[#0072B1] focus:text-white bg-gray-200 text-[#111111] " value={selectedValue}  >
              {selectedValue}
              <CaretDownIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent className=' rounded-xl flex   bg-gray-200 text-[#111111] flex-col items-center gap-4 w-52   '    >


              <DropdownMenuItem onClick={() => { setSelectedValue('Edit') }}
                className=' hover:bg-[#0072B1] hover:text-white focus:bg-[#0072B1]  focus:text-white 
   px-24 ' >


                Edit</DropdownMenuItem>

              <DropdownMenuItem onClick={(e) => { setSelectedValue('Duplicate') }} className='  hover:bg-[#0072B1] focus:bg-[#0072B1] hover:text-white  focus:text-white  px-24' >Duplicate</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

        </div>
      </div>

    </div >
  )
}

export default SearchSection