import { useTranslations } from 'next-intl'

import { TbApi, TbDatabase } from 'react-icons/tb'

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

const { Title, Text } = Typography

function SelectSource() {
	const tg = useTranslations()
	const t = useTranslations('datasets.creation.steps.two.source')
	//
	return (
		<div className='flex flex-col gap-y-4'>
			<Input.Search placeholder={tg('search')} />
			<Title level={5}>{t('title')}</Title>
			<div className='-mr-6 mb-4 max-h-95 overflow-y-auto pr-4'>
				<Radio className='flex flex-col gap-y-3'>
					<Label
						htmlFor='sourse-1'
						className='flex items-center justify-between'
					>
						<div className='flex w-full items-center gap-x-4'>
							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
								<TbDatabase />
							</div>
							<div className='flex flex-col whitespace-nowrap'>
								<Text accent>1C_ЗУП</Text>
								<Text muted size={'sm'}>
									Postgres
								</Text>
							</div>
						</div>

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

					<Label
						htmlFor='sourse-2'
						className='flex items-center justify-between'
					>
						<div className='flex w-full items-center gap-x-4'>
							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
								<TbApi />
							</div>
							<div className='flex flex-col whitespace-nowrap'>
								<Text accent>srv-obvp-243.bft.local:8080</Text>
								<Text muted size={'sm'}>
									ПА
								</Text>
							</div>
						</div>

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

					<Label
						htmlFor='sourse-3'
						className='flex items-center justify-between'
					>
						<div className='flex w-full items-center gap-x-4'>
							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
								<TbApi />
							</div>
							<div className='flex flex-col whitespace-nowrap'>
								<Text accent>Тестовый стенд полиматики</Text>
								<Text muted size={'sm'}>
									ПА
								</Text>
							</div>
						</div>

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

					<Label
						htmlFor='sourse-4'
						className='flex items-center justify-between'
					>
						<div className='flex w-full items-center gap-x-4'>
							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
								<TbDatabase />
							</div>
							<div className='flex flex-col whitespace-nowrap'>
								<Text accent>БД. НО</Text>
								<Text muted size={'sm'}>
									ClickHouse
								</Text>
							</div>
						</div>

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

					<Label
						htmlFor='sourse-5'
						className='flex items-center justify-between'
					>
						<div className='flex w-full items-center gap-x-4'>
							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
								<TbDatabase />
							</div>
							<div className='flex flex-col whitespace-nowrap'>
								<Text accent>БД. УО</Text>
								<Text muted size={'sm'}>
									Postgres
								</Text>
							</div>
						</div>

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

					<Label
						htmlFor='sourse-6'
						className='flex items-center justify-between'
					>
						<div className='flex w-full items-center gap-x-4'>
							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
								<TbApi />
							</div>
							<div className='flex flex-col whitespace-nowrap'>
								<Text accent>Источник ПА</Text>
								<Text muted size={'sm'}>
									ПА
								</Text>
							</div>
						</div>

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

					<Label
						htmlFor='sourse-7'
						className='flex items-center justify-between'
					>
						<div className='flex w-full items-center gap-x-4'>
							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
								<TbDatabase />
							</div>
							<div className='flex flex-col whitespace-nowrap'>
								<Text accent>1C_ЗУП</Text>
								<Text muted size={'sm'}>
									Postgres
								</Text>
							</div>
						</div>

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

					<Label
						htmlFor='sourse-8'
						className='flex items-center justify-between'
					>
						<div className='flex w-full items-center gap-x-4'>
							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
								<TbApi />
							</div>
							<div className='flex flex-col whitespace-nowrap'>
								<Text accent>srv-obvp-243.bft.local:8080</Text>
								<Text muted size={'sm'}>
									ПА
								</Text>
							</div>
						</div>

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

					<Label
						htmlFor='sourse-9'
						className='flex items-center justify-between'
					>
						<div className='flex w-full items-center gap-x-4'>
							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
								<TbApi />
							</div>
							<div className='flex flex-col whitespace-nowrap'>
								<Text accent>Тестовый стенд полиматики</Text>
								<Text muted size={'sm'}>
									ПА
								</Text>
							</div>
						</div>

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

					<Label
						htmlFor='sourse-10'
						className='flex items-center justify-between'
					>
						<div className='flex w-full items-center gap-x-4'>
							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
								<TbDatabase />
							</div>
							<div className='flex flex-col whitespace-nowrap'>
								<Text accent>БД. НО</Text>
								<Text muted size={'sm'}>
									ClickHouse
								</Text>
							</div>
						</div>

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

					<Label
						htmlFor='sourse-11'
						className='flex items-center justify-between'
					>
						<div className='flex w-full items-center gap-x-4'>
							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
								<TbDatabase />
							</div>
							<div className='flex flex-col whitespace-nowrap'>
								<Text accent>БД. УО</Text>
								<Text muted size={'sm'}>
									Postgres
								</Text>
							</div>
						</div>

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

					<Label
						htmlFor='sourse-12'
						className='flex items-center justify-between'
					>
						<div className='flex w-full items-center gap-x-4'>
							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
								<TbApi />
							</div>
							<div className='flex flex-col whitespace-nowrap'>
								<Text accent>Источник ПА</Text>
								<Text muted size={'sm'}>
									ПА
								</Text>
							</div>
						</div>

						<Radio.Item value='sourse-12' id='sourse-12' />
					</Label>
				</Radio>
			</div>
		</div>
	)
}

export { SelectSource }
