import {SearchIcon} from 'lucide-react'
import {getTranslations} from 'next-intl/server'
import Form from 'next/form'

import {Button} from '@/ui/button'
import {Input} from '@/ui/input'

export default async function SearchForm({query}: {query?: string}) {
	const t = await getTranslations('UI')

	return (
		<Form
			action='/search'
			scroll={false}
			className='border-stone flex h-10 w-full overflow-hidden rounded-[10px] border-2'
		>
			<Input
				className='h-full flex-1 rounded-none border-0 bg-white text-base text-stone-600 outline-0 dark:border-gray-200'
				placeholder={t('search-placeholder')}
				name='query'
				defaultValue={query}
				type='text'
			/>
			<Button
				type='submit'
				className='h-full rounded-none border-none bg-neutral-200 px-3 py-2 text-stone-600'
			>
				{/*<SearchIcon className='size-5' />*/}
				{t('search-button')}
			</Button>
		</Form>
	)
}