import { useTranslations } from 'next-intl'
import { ReactNode } from 'react'

import { Button, Typography } from '@/components/atoms'

import { stepLabelStyles, stepStyles } from './Step.styles'

const { Text } = Typography

type StepProps = {
	num: string
	icon: ReactNode
	isActive: boolean
}

function Step({ num, icon, isActive }: StepProps) {
	const t = useTranslations('datasets.creation')

	return (
		<div className={stepStyles}>
			<Button
				asChild
				className='pointer-events-none'
				size='icon'
				variant={isActive ? 'default' : 'label'}
				color={isActive ? 'primary' : 'secondary'}
			>
				<span>{icon}</span>
			</Button>

			<div className={stepLabelStyles}>
				<Text accent strong className='uppercase'>
					{t(`steps.${num}.btn.name`)}
				</Text>
				<Text strong muted>
					{t(`steps.${num}.btn.desc`)}
				</Text>
			</div>
		</div>
	)
}

export { Step }
