'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-black data-[active]:text-black
                ${className}
            `}
        >
            {children}
            <span className="flex-shrink-0">{icon}</span>
            <span>{title}</span>
        </Link>
    )
}