import { Volume2, VolumeX } from 'lucide-react';
import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useMuteList } from '@/hooks/useMuteList';
import { useMuteUser } from '@/hooks/useMuteUser';
import { useUnmuteUser } from '@/hooks/useUnmuteUser';
import { useTranslation } from '@/contexts/language';

/** Inline mute action for content cards. Renders nothing when logged out. */
export function MuteMenuItem({
  pubkey,
  className,
}: {
  pubkey: string;
  className?: string;
}) {
  const { t } = useTranslation();
  const { user } = useCurrentUser();
  const { data: muted } = useMuteList();
  const mute = useMuteUser();
  const unmute = useUnmuteUser();
  if (!user || user.pubkey === pubkey) return null;

  const isMuted = !!muted?.has(pubkey);
  return (
    <DropdownMenuItem
      disabled={mute.isPending || unmute.isPending}
      onClick={(event) => {
        event.preventDefault();
        event.stopPropagation();
        if (isMuted) unmute.mutate(pubkey);
        else mute.mutate(pubkey);
      }}
      className={className}
    >
      {isMuted ? <Volume2 className="mr-2 h-4 w-4" /> : <VolumeX className="mr-2 h-4 w-4" />}
      {isMuted ? t('walletUi.trust.unmute') : t('walletUi.trust.mute')}
    </DropdownMenuItem>
  );
}