import React from 'react';
import { Badge } from '../../ui';
import {
  ShoppingCart,
  Package,
  ClipboardList,
  Factory,
  ChefHat,
  Truck,
  CreditCard,
  Brain,
  Bell,
  Cloud,
  TrendingUp,
} from 'lucide-react';

interface ServiceBadgeProps {
  service: string;
  showIcon?: boolean;
}

export const ServiceBadge: React.FC<ServiceBadgeProps> = ({ service, showIcon = true }) => {
  const serviceConfig: Record<string, { label: string; color: 'blue' | 'green' | 'purple' | 'orange' | 'pink' | 'indigo' | 'teal' | 'cyan' | 'amber'; icon: any }> = {
    sales: {
      label: 'Ventas',
      color: 'blue',
      icon: ShoppingCart,
    },
    inventory: {
      label: 'Inventario',
      color: 'green',
      icon: Package,
    },
    orders: {
      label: 'Pedidos',
      color: 'purple',
      icon: ClipboardList,
    },
    production: {
      label: 'Producción',
      color: 'orange',
      icon: Factory,
    },
    recipes: {
      label: 'Recetas',
      color: 'pink',
      icon: ChefHat,
    },
    suppliers: {
      label: 'Proveedores',
      color: 'indigo',
      icon: Truck,
    },
    pos: {
      label: 'POS',
      color: 'teal',
      icon: CreditCard,
    },
    training: {
      label: 'Entrenamiento',
      color: 'cyan',
      icon: Brain,
    },
    notification: {
      label: 'Notificaciones',
      color: 'amber',
      icon: Bell,
    },
    external: {
      label: 'Externo',
      color: 'blue',
      icon: Cloud,
    },
    forecasting: {
      label: 'Pronósticos',
      color: 'purple',
      icon: TrendingUp,
    },
  };

  const config = serviceConfig[service] || {
    label: service,
    color: 'gray' as const,
    icon: Package,
  };

  const { label, color, icon: Icon } = config;

  return (
    <Badge color={color}>
      {showIcon && <Icon className="mr-1 h-3 w-3" />}
      {label}
    </Badge>
  );
};