import clsx from 'clsx'
import { ReactNode } from 'react'

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

const { Text } = Typography

interface WidgetEmptyProps {
	icon: ReactNode
	text: string
	className?: string
}

export const WidgetEmpty = ({ icon, text, className }: WidgetEmptyProps) => {
	return (
		<div className='bg-secondary/8 flex size-full flex-col items-center justify-center gap-y-2'>
			<Button
				asChild
				size='icon'
				variant='label'
				color='secondary'
				className={clsx('pointer-events-none', className)}
			>
				<span>{icon}</span>
			</Button>
			<Text strong accent>
				{text}
			</Text>
		</div>
	)
}
