'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'

export default function SearchBar({ setSearch }){
    return(
        <div className="flex justify-between items-center bg-white w-full h-full rounded-lg p-0.5">
            <input id="search_input" className="z-20 px-4 w-5/6 h-full rounded-lg bg-transparent" placeholder="یه چیز خوشمزه پیدا کن..."/>
            <button onClick={e => setSearch(document.getElementById('search_input').value) } className="z-20 flex items-center justify-center bg-gradient-to-tr from-rose-700 to-orange-400 w-10 rounded-lg h-10 m-2 mx-0.5 shadow-xl">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2"  className="w-6 h-6 stroke-white">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
                </svg>
            </button>
        </div>
    )
}