'use client';

import React from 'react';
import { Shield } from 'lucide-react';

interface StatusBadgeProps {
  badge: 'none' | 'silver' | 'gold' | 'platinium';
  size?: 'sm' | 'md';
}

const BADGE_CONFIG = {
  none: null,
  silver: {
    label: 'Silver',
    bg: 'bg-slate-100',
    text: 'text-slate-700',
    icon: 'text-slate-500',
  },
  gold: {
    label: 'Gold',
    bg: 'bg-yellow-100',
    text: 'text-yellow-800',
    icon: 'text-yellow-600',
  },
  platinium: {
    label: 'Platinium',
    bg: 'bg-purple-100',
    text: 'text-purple-800',
    icon: 'text-purple-600',
  },
};

export default function StatusBadge({ badge, size = 'sm' }: StatusBadgeProps) {
  const config = BADGE_CONFIG[badge];
  if (!config) return null;

  const sizeClasses = size === 'sm'
    ? 'text-xs px-2 py-0.5 gap-1'
    : 'text-sm px-3 py-1 gap-1.5';

  const iconSize = size === 'sm' ? 'w-3 h-3' : 'w-4 h-4';

  return (
    <span className={`inline-flex items-center font-medium rounded-full ${config.bg} ${config.text} ${sizeClasses}`}>
      <Shield className={`${iconSize} ${config.icon}`} />
      {config.label}
    </span>
  );
}