"use client";
import {
  Bug,
  ShieldCheck,
  Star,
  Crown,
  Heart,
  Flame,
  Gem,
  Trophy,
  Sparkles,
} from "lucide-react";
import { useI18n } from "./I18nProvider";
import { glowColor, type ProfileAppearance } from "@/shared/profile-appearance";
export const badgeIcons = {
  star: Star,
  crown: Crown,
  heart: Heart,
  flame: Flame,
  gem: Gem,
  trophy: Trophy,
  sparkles: Sparkles,
};
export function Username({
  name,
  glow,
  appearance = {},
}: {
  name: string;
  glow?: boolean;
  appearance?: ProfileAppearance;
}) {
  const { t } = useI18n();
  const color = glowColor(appearance.glow_color),
    enabled = glow ?? appearance.name_glow;
  const Icon =
    badgeIcons[appearance.custom_prefix_icon as keyof typeof badgeIcons] ??
    Star;
  return (
    <span className="username">
      {appearance.role === "moderator" && (
        <span
          className="username-prefix username-moderator"
          title={t("Moderator")}
        >
          <ShieldCheck size={13} aria-hidden="true" />
          {t("Moderator")}
        </span>
      )}
      {appearance.bug_finder && (
        <span
          className="username-prefix username-bug-finder"
          title={t("Bug finder")}
        >
          <Bug size={13} aria-hidden="true" />
          {t("Bug finder")}
        </span>
      )}
      {appearance.custom_prefix && (
        <span className="username-prefix username-custom-prefix">
          <Icon size={13} aria-hidden="true" />
          {appearance.custom_prefix}
        </span>
      )}
      <span
        className={enabled ? "username-glow" : undefined}
        style={
          enabled
            ? { color, textShadow: `0 0 8px ${color}90, 0 0 18px ${color}60` }
            : undefined
        }
      >
        {name}
      </span>
    </span>
  );
}