Untitled

import { Badge } from '@kit/ui/badge';
import { cn } from '@kit/ui/utils';
import { ArrowDown } from 'lucide-react';
import { Trans } from '@kit/ui/trans';

interface PriorityBadgeProps {
  priority: string;
  showLabel?: boolean;
  className?: string;
}

export function PriorityBadge({ priority, showLabel = false, className }: PriorityBadgeProps) {
  const getPriorityStyles = (priority: string) => {
    switch (priority) {
      case 'high':
        return {
          className: 'border-red-500 text-red-600 bg-red-50',
          icon: <span className="inline-flex items-center justify-center w-3 h-3 text-[12px] leading-none text-red-600">!</span>,
          label: <Trans i18nKey="calls:priorityHigh" />
        };
      case 'medium':
        return {
          className: 'border-amber-500 text-amber-600 bg-amber-50',
          icon: <span className="inline-flex items-center justify-center w-3 h-3 text-[12px] leading-none text-amber-600">-</span>,
          label: <Trans i18nKey="calls:priorityMedium" />
        };
      case 'low':
        return {
          className: 'border-blue-500 text-blue-600 bg-blue-50',
          icon: <ArrowDown className="h-3 w-3 text-blue-600" />,
          label: <Trans i18nKey="calls:priorityLow" />
        };
      default:
        return {
          className: 'border-amber-500 text-amber-600 bg-amber-50',
          icon: <span className="inline-flex items-center justify-center w-3 h-3 text-[12px] leading-none text-amber-600">-</span>,
          label: <Trans i18nKey="calls:priorityMedium" />
        };
    }
  };

  const styles = getPriorityStyles(priority);

  return (
    <div className={cn("flex items-center gap-2", className)}>
      <Badge 
        variant="outline"
        className={cn(
          "text-xs border-2 p-1 leading-none flex items-center justify-center",
          styles.className
        )}
      >
        {styles.icon}
      </Badge>
      {showLabel && styles.label}
    </div>
  );
}