'use client';

import React from 'react';
import { StatusBadge } from '@/ui/StatusBadge';
import { 
  CheckCircle2, 
  AlertTriangle, 
  XCircle, 
  Clock,
  LucideIcon
} from 'lucide-react';

export type UserStatus = 'active' | 'suspended' | 'deleted' | 'pending';

interface UserStatusTagProps {
  status: UserStatus | string;
}

interface StatusConfig {
  variant: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'pending';
  icon: LucideIcon;
  label: string;
}

/**
 * UserStatusTag
 * 
 * Semantic status indicator for users.
 * Maps status strings to appropriate visual variants and icons.
 */
export function UserStatusTag({ status }: UserStatusTagProps) {
  const normalizedStatus = status.toLowerCase() as UserStatus;

  const config: Record<UserStatus, StatusConfig> = {
    active: {
      variant: 'success',
      icon: CheckCircle2,
      label: 'Active'
    },
    suspended: {
      variant: 'warning',
      icon: AlertTriangle,
      label: 'Suspended'
    },
    deleted: {
      variant: 'error',
      icon: XCircle,
      label: 'Deleted'
    },
    pending: {
      variant: 'pending',
      icon: Clock,
      label: 'Pending'
    }
  };

  const { variant, icon, label } = config[normalizedStatus] || {
    variant: 'neutral',
    icon: Clock,
    label: status
  };

  return (
    <StatusBadge variant={variant} icon={icon}>
      {label}
    </StatusBadge>
  );
}
