High Contrast and Color Vision

// Status Badge Preserving Structure in High Contrast and Forced Colors Modes
import React from "react";
import { CheckCircle2, AlertTriangle, AlertCircle } from "lucide-react";

export function AccessibleStatusBadge({ status }) {
  const styles = {
    approved: { label: "Approved", labelTa: "அங்கீகரிக்கப்பட்டது", icon: CheckCircle2, color: "text-emerald-700 bg-emerald-50 border-emerald-200 dark:bg-emerald-950/20" },
    pending: { label: "Pending", labelTa: "செயலாக்கத்தில்", icon: AlertTriangle, color: "text-amber-700 bg-amber-50 border-amber-200 dark:bg-amber-950/20" },
    rejected: { label: "Rejected", labelTa: "நிராகரிக்கப்பட்டது", icon: AlertCircle, color: "text-red-700 bg-red-50 border-red-200 dark:bg-red-950/20" },
  };

  const current = styles[status] || styles.pending;
  const Icon = current.icon;

  return (
    <div className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold ${current.color} 
      /* HIGH CONTRAST FALLBACK: ensure borders and outlines are visible when system colors are overridden */
      outline outline-2 outline-transparent outline-offset-1 focus-visible:outline-primary`
    }>
      <Icon className="size-4 shrink-0" />
      <span className="font-medium">{current.label}</span>
      <span className="font-tamil font-normal text-muted-foreground/80 opacity-90 text-[10px]" lang="ta">
        ({current.labelTa})
      </span>
    </div>
  );
}