import { useTranslations } from 'next-intl'

import { TbFileInvoice, TbSitemap } from 'react-icons/tb'

import { Label, Radio, Typography } from '@/components/atoms'

import {
	labelBodyStyles,
	labelIconStyles,
	labelStyles,
	labelTextStyles
} from './Step1.styles'

import { useCreateDataset } from '@/hooks'

const { Title, Text } = Typography

function Step1() {
	const t = useTranslations('datasets.creation.steps.one')
	//
	const { sourceType, setSourceType } = useCreateDataset()
	//
	return (
		<div className='flex flex-col gap-y-4'>
			<Title level={5}>{t('title')}</Title>
			<Radio
				value={sourceType}
				className='flex flex-col gap-y-4'
				onValueChange={setSourceType}
			>
				<Label htmlFor='type-sourse' className={labelStyles}>
					<div className={labelBodyStyles}>
						<div className={labelIconStyles()}>
							<TbSitemap />
						</div>
						<div className={labelTextStyles}>
							<Text accent>{t('source.name')}</Text>
							<Text muted size={'sm'}>
								{t('source.desc')}
							</Text>
						</div>
					</div>

					<Radio.Item value='source' id='type-sourse' />
				</Label>

				<Label htmlFor='type-file' className={labelStyles}>
					<div className={labelBodyStyles}>
						<div className={labelIconStyles({ type: 'file' })}>
							<TbFileInvoice />
						</div>
						<div className={labelTextStyles}>
							<Text accent>{t('file.name')}</Text>
							<Text muted size={'sm'}>
								{t('file.desc')}
							</Text>
						</div>
					</div>

					<Radio.Item value='file' id='type-file' />
				</Label>
			</Radio>
		</div>
	)
}

export { Step1 }
