import clsx from 'clsx'
import { useLocale } from 'next-intl'
import { type ComponentProps } from 'react'

import { type RootStylesProps } from '..//Typography/Text/Text.styles'
import { Typography } from '../Typography'

import { getFormatDate } from '@/utils'

const { Text } = Typography

type DateProps = ComponentProps<'span'> &
	RootStylesProps & {
		date: string
	}

function Date({ date, className, ...props }: DateProps) {
	const locale = useLocale()
	//
	return (
		<Text className={clsx('text-nowrap', className)} {...props}>
			{getFormatDate(date, locale)}
		</Text>
	)
}

export { Date }
