interface ProfileCompletionProps {
  checks: Record<string, boolean>;
}

export default function ProfileCompletion({ checks }: ProfileCompletionProps) {
  const total = Object.keys(checks).length;
  const completed = Object.values(checks).filter(Boolean).length;
  const percentage = Math.round((completed / total) * 100);

  const color =
    percentage >= 80
      ? "text-green-400 bg-green-400"
      : percentage >= 50
      ? "text-gold bg-gold"
      : "text-rose bg-rose";

  const bgColor =
    percentage >= 80
      ? "bg-green-400/10 border-green-400/20"
      : percentage >= 50
      ? "bg-gold/10 border-gold/20"
      : "bg-rose/10 border-rose/20";

  return (
    <div className={`rounded-xl border p-5 ${bgColor}`}>
      <div className="flex items-center justify-between mb-3">
        <h3 className="font-semibold text-white text-sm">Profile Completion</h3>
        <span className={`text-2xl font-bold ${color.split(" ")[0]}`}>{percentage}%</span>
      </div>

      {/* Progress bar */}
      <div className="w-full h-2 bg-surface-light rounded-full overflow-hidden mb-4">
        <div
          className={`h-full rounded-full transition-all duration-500 ${color.split(" ")[1]}`}
          style={{ width: `${percentage}%` }}
        />
      </div>

      {/* Checklist */}
      <div className="grid grid-cols-2 gap-2">
        {Object.entries(checks).map(([label, passed]) => (
          <div key={label} className="flex items-center gap-2 text-sm">
            {passed ? (
              <svg className="w-4 h-4 text-green-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            ) : (
              <svg className="w-4 h-4 text-text-muted shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="9" strokeWidth={2} />
              </svg>
            )}
            <span className={passed ? "text-text-muted line-through" : "text-white"}>
              {label}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}