import React from 'react';
import { Construction, Eye } from 'lucide-react';
import { cn } from '@/lib/utils';

/**
 * StatusBadge - Componente para exibir tags de status das telas
 * @param {Object} props
 * @param {'construction' | 'demo' | 'active'} props.status - Status da tela
 * @param {string} [props.className] - Classes adicionais
 */
export const StatusBadge = ({ status, className }) => {
  if (status === 'active') {
    return null; // Não exibe badge para telas ativas
  }

  const config = {
    construction: {
      icon: Construction,
      text: 'Em Construção',
      bgColor: 'bg-yellow-500/10',
      textColor: 'text-yellow-500',
      borderColor: 'border-yellow-500/20',
      iconColor: 'text-yellow-500'
    },
    demo: {
      icon: Eye,
      text: 'Demonstração Visual',
      bgColor: 'bg-blue-500/10',
      textColor: 'text-blue-500',
      borderColor: 'border-blue-500/20',
      iconColor: 'text-blue-500'
    }
  };

  const { icon: Icon, text, bgColor, textColor, borderColor, iconColor } = config[status] || config.construction;

  return (
    <div
      className={cn(
        'inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider border',
        bgColor,
        textColor,
        borderColor,
        className
      )}
    >
      <Icon size={14} className={iconColor} />
      <span>{text}</span>
    </div>
  );
};
