'use client';

import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';
import { SCORE_THRESHOLDS } from '@/constants/app';

interface ScoreCardProps {
  label: string;
  score: number;
  maxScore?: number;
  className?: string;
}

function getScoreColor(score: number) {
  if (score >= SCORE_THRESHOLDS.excellent) return { bg: 'bg-success/10', text: 'text-success', bar: 'bg-success' };
  if (score >= SCORE_THRESHOLDS.good) return { bg: 'bg-primary/10', text: 'text-primary', bar: 'bg-primary' };
  if (score >= SCORE_THRESHOLDS.fair) return { bg: 'bg-warning/10', text: 'text-warning', bar: 'bg-warning' };
  return { bg: 'bg-destructive/10', text: 'text-destructive', bar: 'bg-destructive' };
}

export function ScoreCard({ label, score, maxScore = 100, className }: ScoreCardProps) {
  const percentage = Math.min((score / maxScore) * 100, 100);
  const colors = getScoreColor(score);

  return (
    <div className={cn('rounded-2xl border border-border/50 bg-card p-4', className)}>
      <div className="flex items-center justify-between mb-2">
        <span className="text-sm font-medium text-muted-foreground">{label}</span>
        <span className={cn('font-heading text-lg font-bold', colors.text)}>
          {score}
        </span>
      </div>
      <div className="h-2 rounded-full bg-muted overflow-hidden">
        <motion.div
          initial={{ width: 0 }}
          animate={{ width: `${percentage}%` }}
          transition={{ duration: 1, ease: 'easeOut', delay: 0.3 }}
          className={cn('h-full rounded-full', colors.bar)}
        />
      </div>
    </div>
  );
}