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

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

export default function MenuItem({ href, title, icon, className, children, ...restProps }: Props) {
    return (
        <Link
            {...restProps}
            href={href}
            className={`inline-flex gap-2 ps-8 border-transparent text-disabled-text text-xs items-center font-light text-nowrap overflow-hidden h-6
                data-[active]:border-s-6 data-[active]:border-black data-[active]:text-black ${className}`}>
            {children}
            {icon}
            <div>{title}</div>
        </Link>
    )
}