import { useTranslations } from 'next-intl'

import { Input } from '@/components/atoms'

import { Typography } from '../Typography'

const { Text } = Typography

type RangeNumberProps = {
	size?: 'sm' | 'md' | 'lg' | null
}

export function RangeNumber({ size = 'md' }: RangeNumberProps) {
	const t = useTranslations('range')

	return (
		<div className='flex items-center gap-x-2'>
			<Input.Number
				sizes={size}
				placeholder={t('from')}
				className='!w-30'
			/>
			<Text muted size={'sm'}>
				—
			</Text>
			<Input.Number
				sizes={size}
				placeholder={t('to')}
				className='!w-30'
			/>
		</div>
	)
}
