import { useTranslations } from 'next-intl'
import { type ComponentProps } from 'react'

import { FileModel, SourceModel } from '@/graphql'

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

import { rootStyles } from './Source.styles'

import { getSourceIcon, getSourceType } from './Source.utils'

const { Text } = Typography

type SourceProps = ComponentProps<'span'> & {
	source?: SourceModel | FileModel
}

function Source({ source }: SourceProps) {
	const t = useTranslations('datasets.source')
	//
	const sourceType = getSourceType(source!)
	//
	const Icon = getSourceIcon(sourceType)
	//
	return (
		<Tooltip
			title={t(sourceType, {
				name: (source as FileModel).originalName || source!.name
			})}
			side='left'
		>
			<Text className={rootStyles}>
				<Icon />
			</Text>
		</Tooltip>
	)
}

export { Source }
