"use client";

import { CheckCircle, Clock, TriangleAlert, MapPin } from "lucide-react";
import { cn } from "@/shared/utils";

export type EligibilityStatus = "eligible" | "pending" | "not_requested" | "ineligible";

interface EligibilityStatusBadgeProps {
  status: EligibilityStatus;
  speed?: string | undefined;
}

const STATUS_CONFIGS = {
  eligible: {
    icon: CheckCircle,
    bg: "bg-success-soft",
    border: "border-success/30",
    text: "text-success",
    label: "Service Available",
  },
  pending: {
    icon: Clock,
    bg: "bg-info-soft",
    border: "border-info/30",
    text: "text-info",
    label: "Review in Progress",
  },
  not_requested: {
    icon: MapPin,
    bg: "bg-muted",
    border: "border-border",
    text: "text-muted-foreground",
    label: "Verification Required",
  },
  ineligible: {
    icon: TriangleAlert,
    bg: "bg-warning/10",
    border: "border-warning/30",
    text: "text-warning",
    label: "Not Available",
  },
} as const;

/**
 * Displays the current eligibility status as a badge with icon.
 * Used in the Internet Plans view to show user's eligibility state.
 */
export function EligibilityStatusBadge({ status, speed }: EligibilityStatusBadgeProps) {
  const config = STATUS_CONFIGS[status];
  const Icon = config.icon;

  return (
    <div
      className={cn(
        "inline-flex items-center gap-2 px-4 py-2 rounded-full border",
        config.bg,
        config.border
      )}
    >
      <Icon className={cn("h-4 w-4", config.text)} />
      <span className={cn("font-semibold text-sm", config.text)}>{config.label}</span>
      {status === "eligible" && speed && (
        <>
          <span className="text-muted-foreground">·</span>
          <span className="text-sm text-foreground font-medium">Up to {speed}</span>
        </>
      )}
    </div>
  );
}
