"use client";

import { ProgressRing } from "@/components/ui/progress-ring";
import { Card } from "@/components/ui/card";
import { tf } from "@/lib/i18n/dashboard-labels";
import type { AppLocale } from "@/lib/i18n/config";

export interface EligibilityGaugeProps {
  score: number;
  label?: string;
  locale: AppLocale;
  className?: string;
}

export function EligibilityGauge({
  score,
  label,
  locale,
  className,
}: EligibilityGaugeProps) {
  const displayLabel = label ?? tf("eligibilityLabel", locale);

  return (
    <Card padding="md" className={className}>
      <div className="flex items-center gap-4">
        <ProgressRing
          value={score}
          max={100}
          label={tf("eligibility", locale)}
          variant="circle"
          size="sm"
        />
        <div className="min-w-0 flex-1">
          <p className="font-onest text-lg font-bold text-success-green">{displayLabel}</p>
          <p className="font-inter text-sm text-ink">{tf("strongProfile", locale)}</p>
          <p className="font-inter text-xs text-muted mt-1">{tf("scoreUpdatedToday", locale)}</p>
        </div>
      </div>
    </Card>
  );
}