import Link, { type LinkProps } from 'next/link'
import { type ComponentProps } from 'react'

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

import { type LinkStylesProps, linkStyles, rootStyles } from './Item.styles'

import { useSidebar } from '@/hooks/useSidebar'

type ItemProps = ComponentProps<'a'> &
	LinkProps &
	LinkStylesProps & {
		tooltip: string
	}

function Item({ active, tooltip, children, ...props }: ItemProps) {
	const { isMobile, isOpen } = useSidebar()

	return (
		<li className={rootStyles}>
			<Tooltip title={tooltip} side='right' hidden={isOpen || isMobile}>
				<Link className={linkStyles({ active })} {...props}>
					{children}
				</Link>
			</Tooltip>
		</li>
	)
}

export { Item }
