'use client';

import { getPriorityConfig } from '@/lib/status-config';

interface PriorityBadgeProps {
  priority: 'low' | 'medium' | 'high' | 'urgent';
  className?: string;
}

export function PriorityBadge({
  priority,
  className = '',
}: PriorityBadgeProps) {
  const config = getPriorityConfig(priority);
  const baseClasses = 'text-xs px-2 py-0.5 rounded font-medium border';

  let colorClasses = '';
  switch (config.color) {
    case 'blue':
      colorClasses =
        'text-[var(--primary)] bg-[var(--primary)]/10 border-[var(--primary)]/20';
      break;
    case 'yellow':
      colorClasses =
        'text-[var(--accent)] bg-[var(--accent)]/10 border-[var(--accent)]/20';
      break;
    case 'purple':
      colorClasses = 'text-[#8b5cf6] bg-[#8b5cf6]/10 border-[#8b5cf6]/20';
      break;
    case 'red':
      colorClasses =
        'text-[var(--destructive)] bg-[var(--destructive)]/10 border-[var(--destructive)]/20';
      break;
    default:
      colorClasses =
        'text-[var(--muted-foreground)] bg-[var(--muted)]/10 border-[var(--muted)]/20';
  }

  return (
    <span className={`${baseClasses} ${colorClasses} ${className}`}>
      {config.label}
    </span>
  );
}
