"use client";

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

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

export default function SideMenuItem({ href, title, icon, badge, 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="flex items-start gap-2">
        <span className="mt-0.5">{title}</span>

        {badge && <span className="rounded-md mt-0.5  border border-primary text-primary px-1.5 py-0.5 text-[8px] leading-none font-light dark:bg-white/15 dark:text-neutral-200">{badge}</span>}
      </span>
    </Link>
  );
}
