'use client';

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

type Props = {
    icon: React.ReactElement
    title: string
} & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>

export default function SideMenuItem({ href, title, icon, className, children, ...restProps }: Props) {
    return (
        <Link
            {...restProps}
            href={href}
            className={`
                inline-flex gap-3 ps-6 xl:ps-9 h-full w-full items-center overflow-hidden text-nowrap
                text-xs font-light text-disabled-text border-transparent
                data-active:border-s-6 data-active:border-primary data-active:text-primary
                dark:data-active:border-foreground dark:data-active:text-foreground
                ${className}
            `}
        >
            {children}
            <span className="shrink-0">{icon}</span>
            <span className='mt-0.5'>{title}</span>
        </Link>
    )
}