'use client'
import Image from 'next/image'
import React from 'react'
type Props = {
  classname?: string
}
const SearchAsistant = (props: Props) => {
  const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
  ]
  return (
    <div className={` py-10 ${props.classname} `}>

      <div className='container'>


        <div className='flex flex-col items-start justify-center w-full   gap-4'>

          <div>
            <Image src="/ico_search.svg" width={50} height={50} alt='Search' />
          </div>
          <h5 className='heading'> Arama Asistanı  </h5>
          <p>
            Arama Asistanı'nı kullanarak daha odaklı sonuçler elde etmeniz mümkündür. İhtiyacınız olan ürünü veya markayı daga spesifik filtrelerle arayarak, zaman kaybetmeden en uygun seçeneklere ulaşabilirsiniz.

          </p>

          <div className='grid  grid-cols-1  lg:grid-cols-4 w-full gap-2'>

            <select className='select'>
              <option value={''}> Marka</option>
            </select>
            <select className='select'>
              <option value={''}> Kategori</option>
            </select>
            <select className='select'>
              <option value={''}> Model</option>
            </select>
          </div>

          <button className='px-12 py-2 border border-primary bg-primary text-white text-sm hover:bg-white hover:text-primary duration-300'> Ara</button>
  
        </div>


      </div>

    </div>
  )
}

export default SearchAsistant