import React from 'react';

export const MenuItem = ({
  icon,
  title,
  onClick,
  danger,
  after,
}: {
  icon?: React.ReactNode;
  title: React.ReactNode;
  onClick?: (e: React.MouseEvent) => void;
  danger?: boolean;
  after?: React.ReactNode;
}) => (
  <button
    type="button"
    onClick={onClick}
    className={`
      w-full flex items-center gap-3 px-3 py-2.5
      text-left text-[15px] tg-press
      hover:bg-[var(--tg-bg-hover)]
      ${danger ? 'text-[var(--tg-danger)]' : 'text-[var(--tg-text-primary)]'}
    `}
  >
    {icon != null && (
      <span className="w-5 h-5 flex items-center justify-center text-[18px] opacity-80">
        {icon}
      </span>
    )}
    <span className="flex-1 truncate">{title}</span>
    {after && <span className="shrink-0">{after}</span>}
  </button>
);

export const Menu = ({ children }: { children: React.ReactNode }) => (
  <div className="py-1.5">{children}</div>
);
