import React from 'react';
import { cn } from '../../utils/classNames';

/**
 * Shared row style for sidebar / menu / settings nav items. Use `menuItemClass`
 * directly when you need an `<a>`; use the `MenuItem` component for buttons.
 * Active state uses the subtle `app-selected` fill (not a strong accent).
 */
export const menuItemClass = (opts?: { active?: boolean }) =>
  cn(
    'flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-app-surface',
    opts?.active
      ? 'bg-app-selected text-app-text'
      : 'text-app-muted-strong hover:bg-app-surface-hover hover:text-app-text',
  );

type MenuItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  icon?: React.ReactNode;
  active?: boolean;
  trailing?: React.ReactNode;
};

const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(
  ({ icon, active, trailing, children, className, type = 'button', ...props }, ref) => (
    <button ref={ref} type={type} className={cn(menuItemClass({ active }), className)} {...props}>
      {icon}
      <span className="min-w-0 flex-1 truncate text-left">{children}</span>
      {trailing}
    </button>
  ),
);

MenuItem.displayName = 'MenuItem';

export default MenuItem;