import cn from 'classnames'
import { FC } from 'react'
import s from './Searchbar.module.css'
import { useRouter } from 'next/router'
interface Props {
  className?: string
  children?: any
}

const Searchbar: FC<Props> = ({ className }) => {
  const router = useRouter()
  return (
    <div
      className={cn(
        'relative rounded-lg text-sm bg-accent-1 text-gray-600 w-full',
        className
      )}
    >
      <input
        className={s.input}
        placeholder="Search for products..."
        onChange={(e) => {
          e.preventDefault()
          router.push('/search')
          console.log('changing')
        }}
      />
      <div className={s.iconContainer}>
        <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
          />
        </svg>
      </div>
    </div>
  )
}

export default Searchbar