components/HabitButton.jsx

import React from "react";
import { getStreakColor } from "../utils/streakColor";

const HabitButton = ({ habit, onClick }) => {
  const color = getStreakColor(habit.streak);

  return (
    <button
      onClick={() => onClick(habit)}
      className={`${color} text-white p-4 rounded-xl shadow-md w-full mb-3 hover:scale-105 transition`}
    >
      <div className="flex justify-between">
        <span className="font-semibold">{habit.title}</span>
        <span>{habit.streak} 🔥</span>
      </div>
    </button>
  );
};

export default HabitButton;