'use client';

import { streakUtils } from '@/lib/utils/streakUtils';

interface StreakIndicatorProps {
  streak: number;
  multiplier: number;
  nextMilestone?: number;
}

export const StreakIndicator = ({ streak, multiplier, nextMilestone }: StreakIndicatorProps) => {
  const daysUntilNext = nextMilestone ? nextMilestone - streak : 0;
  const milestone = streakUtils.getMilestoneMessage(streak);

  return (
    <div className="flex items-center gap-4 bg-gradient-to-r from-eco-light to-eco-secondary rounded-card p-4 border-2 border-eco-primary/30">
      <div className="text-4xl animate-pulse">🔥</div>
      <div className="flex-1">
        <div className="flex items-center gap-2">
          <h3 className="font-bold text-lg text-eco-dark">{streak} Hari Berturut-turut</h3>
          <span className="text-2xl">{multiplier}x</span>
        </div>
        <p className="text-sm text-gray-600">Multiplier poin harian</p>
        {daysUntilNext > 0 && (
          <p className="text-xs text-eco-primary font-semibold mt-1">
            {daysUntilNext} hari lagi menuju milestone berikutnya! 🎯
          </p>
        )}
        {milestone && <p className="text-xs text-eco-primary font-bold mt-2">{milestone}</p>}
      </div>
    </div>
  );
};