import React from 'react';
import { IonProgressBar } from '@ionic/react';

interface StatsHabitCardProps {
  name: string;
  color: string;
  completedCount: number;
  totalDays: number;
  streak: number;
}

const StatsHabitCard: React.FC<StatsHabitCardProps> = ({
  name,
  color,
  completedCount,
  totalDays,
  streak,
}) => {
  const ratio = totalDays > 0 ? completedCount / totalDays : 0;
  const percentage = Math.round(ratio * 100);

  return (
    <div className="stats-card">
      <div className="stats-card-header">
        <div>
          <h3>{name}</h3>
          <p>
            {completedCount} of {totalDays} days completed
          </p>
        </div>
        <div className="stats-streak-badge" style={{ color }}>
          {streak}🔥
        </div>
      </div>
      <IonProgressBar
        value={ratio}
        style={{ '--progress-background': color } as React.CSSProperties}
      />
      <div className="stats-card-footer">
        <span>{percentage}% consistency</span>
        <span>Current streak {streak}</span>
      </div>
    </div>
  );
};

export default StatsHabitCard;