appcakes-builds/src/components/HabitCard.tsx

import React from 'react';
import { IonButton, IonIcon, IonSpinner } from '@ionic/react';
import {
  checkmarkOutline,
  ellipseOutline,
  flameOutline,
  trashOutline,
} from 'ionicons/icons';
import type { Tables } from '../database.types';

interface HabitCardProps {
  habit: Tables<'habits'>;
  completedToday: boolean;
  currentStreak: number;
  completionRate: number;
  onToggle: () => void;
  onDelete: () => void;
  busy: boolean;
}

const HabitCard: React.FC<HabitCardProps> = ({
  habit,
  completedToday,
  currentStreak,
  completionRate,
  onToggle,
  onDelete,
  busy,
}) => {
  return (
    <div
      className={`habit-card habit-card--editorial ${completedToday ? 'is-complete' : ''}`}
    >
      <button
        type="button"
        className={`habit-check-button ${completedToday ? 'is-complete' : ''}`}
        onClick={onToggle}
        disabled={busy}
        aria-label={
          completedToday
            ? `Mark ${habit.name} as not done`
            : `Mark ${habit.name} as done`
        }
      >
        {busy ? (
          <IonSpinner name="crescent" />
        ) : completedToday ? (
          <IonIcon icon={checkmarkOutline} />
        ) : (
          <IonIcon icon={ellipseOutline} />
        )}
      </button>

      <div className="habit-card-main">
        <div className="habit-copy">
          <div className="habit-copy-topline">
            <h3>{habit.name}</h3>
            <span
              className="habit-color-pill"
              style={{ background: habit.color }}
            />
          </div>
          <p>
            {habit.target_description ||
              'Show up today and keep the chain alive.'}
          </p>
          <div className="habit-metrics-row">
            <span>
              <IonIcon icon={flameOutline} /> {currentStreak} streak
            </span>
            <span>{completionRate}% this week</span>
          </div>
        </div>
      </div>

      <IonButton
        className="habit-delete-button"
        fill="clear"
        color="medium"
        onClick={onDelete}
        disabled={busy}
      >
        <IonIcon icon={trashOutline} />
      </IonButton>
    </div>
  );
};

export default HabitCard;