import { Shield, Wifi } from 'lucide-react';

import { TOP_BAR_ROLE_BADGE_CLASSES } from '@/shared/constants/topBar';
import type {
  CampusInfo,
  UserRole,
} from '@/shared/types/app';
import { cn } from '@/lib/utils';

interface TopBarCampusBadgeProps {
  readonly campusInfo?: CampusInfo;
}

export function TopBarCampusBadge({ campusInfo }: TopBarCampusBadgeProps) {
  if (!campusInfo) {
    return null;
  }

  return (
    <div className={cn(
      'hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold border',
      campusInfo.borderColor,
      campusInfo.bgLight,
      campusInfo.textColor,
    )}
    >
      <div className={cn('w-4 h-4 rounded bg-gradient-to-br flex items-center justify-center', campusInfo.bgGradient)}>
        <span className="text-white text-[8px] font-bold">{campusInfo.mascot[0]}</span>
      </div>
      {campusInfo.mascot}
      {campusInfo.isOnline && <Wifi size={10} />}
    </div>
  );
}

interface TopBarRoleBadgeProps {
  readonly userRole: UserRole;
  readonly roleLabel: string;
}

export function TopBarRoleBadge({ userRole, roleLabel }: TopBarRoleBadgeProps) {
  const classes = TOP_BAR_ROLE_BADGE_CLASSES[userRole];

  return (
    <div className={cn(
      'hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-xl text-xs font-semibold border',
      classes.bg,
      classes.color,
    )}
    >
      <Shield size={14} />
      {roleLabel}
    </div>
  );
}
