import {FC, FormEventHandler} from 'react'
import styled from 'styled-components'
import TextInput from '../../../molecules/forms/TextInput'
import ActionButton from '../../../molecules/forms/ActionButton'

const Form = styled('form')({
	display: 'grid',
	gridTemplateColumns: '1fr auto',
	gap: '1rem',
})

type Props = {
	onSubmit?: FormEventHandler,
	action?: string,
	labels: Record<string, string>,
}

const OmnisearchForm: FC<Props> = ({
	onSubmit,
	labels,
	action,
}) => {
	return (
		<Form
			method="get"
			onSubmit={onSubmit}
			action={action}
			aria-label={labels['form']}
		>
			<TextInput
				label={labels['query'] || 'Query'}
				name="q"
				block
			/>
			<ActionButton
				type="submit"
				block
			>
				Search
			</ActionButton>
		</Form>
	)
}

export default OmnisearchForm