import React from 'react';
import { Badge } from './ui/badge';

const STATUS_BADGE_CONFIG = {

  //status-based badges
  pending_email: { label: 'Pending Email', variant: 'orange2' },
  pending_validation: { label: 'Pending Validation', variant: 'gray' },
  pre_validated: { label: 'Pre-Validated', variant: 'green' },
  payment_pending: { label: 'Payment Pending', variant: 'orange' },
  active: { label: 'Active', variant: 'green' },
  inactive: { label: 'Inactive', variant: 'gray2' },
  canceled: { label: 'Canceled', variant: 'red' },
  expired: { label: 'Expired', variant: 'red2' },
  abandoned: { label: 'Abandoned', variant: 'gray3' },
  rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700' },

  //role-based badges
  finance: { label: 'Finance Manager', variant: 'purple' },
  guest: { label: 'Guest', variant: 'gray' },
  member: { label: 'Member', variant: 'purple' },
  superadmin: { label: 'Superadmin', variant: 'purple' },
  admin: { label: 'Admin', variant: 'purple' },
  moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
  staff: { label: 'Staff', variant: 'gray' },
  media: { label: 'Media', variant: 'gray2' }
};

//todo: make shield icon dynamic based on status
const StatusBadge = ({ status }) => {
  const statusConfig = STATUS_BADGE_CONFIG[status] || STATUS_BADGE_CONFIG.inactive;

  return (
    <Badge variant={statusConfig.variant} className=" px-3 py-1  rounded-md text-sm">
      {/* <Shield className="h-3 w-3 mr-1 inline" />  */}
      {statusConfig.label}
    </Badge>
  );
};


export default StatusBadge;