'use client';

import { TaskStatus } from '@/lib/types';
import { getStatusConfig, getStatusColor } from '@/lib/status-config';

interface StatusBadgeProps {
  status: TaskStatus;
  className?: string;
  size?: 'sm' | 'md' | 'lg';
  showDot?: boolean;
  showIcon?: boolean;
}

export function StatusBadge({
  status,
  className = '',
  size = 'sm',
  showDot = true,
  showIcon = true,
}: StatusBadgeProps) {
  const config = getStatusConfig(status);
  const colorKey = getStatusColor(status);

  // Mapper les couleurs de statut aux variables CSS du design system
  const getStatusColorVar = (color: string): string => {
    switch (color) {
      case 'blue':
        return 'var(--primary)';
      case 'green':
        return 'var(--success)';
      case 'red':
        return 'var(--destructive)';
      case 'purple':
        return 'var(--purple)';
      case 'gray':
      default:
        return 'var(--gray)';
    }
  };

  const colorVar = getStatusColorVar(colorKey);

  const sizeClasses = {
    sm: 'text-xs px-2 py-0.5',
    md: 'text-sm px-2 py-1',
    lg: 'text-base px-3 py-1.5',
  };

  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full border font-medium transition-colors ${sizeClasses[size]} ${className}`}
      style={{
        backgroundColor: `color-mix(in srgb, ${colorVar} 10%, transparent)`,
        borderColor: `color-mix(in srgb, ${colorVar} 25%, var(--border))`,
        color: colorVar,
      }}
    >
      {showDot && (
        <div
          className="w-2 h-2 rounded-full flex-shrink-0"
          style={{ backgroundColor: colorVar }}
        />
      )}
      {showIcon && <span className="flex-shrink-0">{config.icon}</span>}
      <span>{config.label}</span>
    </span>
  );
}
