'use client';

import { useTranslations } from 'next-intl';
import { CheckCircle2, XCircle, AlertCircle, Settings2 } from 'lucide-react';

import { cn } from '@/lib/utils';
import { Badge } from '@/components/ui/badge';
import type { IntegrationStatus } from '@/types/integrations';

interface IntegrationStatusBadgeProps {
  status: IntegrationStatus;
  className?: string;
  showIcon?: boolean;
  showText?: boolean;
}

/**
 * Status badge for integration connection status
 */
export function IntegrationStatusBadge({
  status,
  className,
  showIcon = true,
  showText = true,
}: IntegrationStatusBadgeProps) {
  const t = useTranslations('integrations');

  const statusConfig: Record<
    IntegrationStatus,
    {
      variant: 'default' | 'success' | 'destructive' | 'warning' | 'secondary';
      icon: typeof CheckCircle2;
      labelKey: string;
    }
  > = {
    connected: {
      variant: 'success',
      icon: CheckCircle2,
      labelKey: 'connected',
    },
    disconnected: {
      variant: 'secondary',
      icon: XCircle,
      labelKey: 'disconnected',
    },
    error: {
      variant: 'destructive',
      icon: AlertCircle,
      labelKey: 'error',
    },
    configuring: {
      variant: 'warning',
      icon: Settings2,
      labelKey: 'configuring',
    },
  };

  const config = statusConfig[status];
  const Icon = config.icon;

  return (
    <Badge
      variant={config.variant}
      className={cn('gap-1', className)}
    >
      {showIcon && <Icon className="h-3 w-3" />}
      {showText && <span>{t(config.labelKey)}</span>}
    </Badge>
  );
}
