"use client";
import { useState } from "react";
interface TaskCardProps {
task: {
id: string;
name: string;
description: string;
points: number;
type: "daily" | "quiz" | "survey" | "referral" | "learning";
completed?: boolean;
};
onComplete: (taskId: string) => void;
}
const taskIcons = {
daily: (
),
quiz: (
),
survey: (
),
referral: (
),
learning: (
),
};
const typeColors = {
daily: "from-blue-500 to-cyan-500",
quiz: "from-purple-500 to-pink-500",
survey: "from-green-500 to-teal-500",
referral: "from-orange-500 to-red-500",
learning: "from-indigo-500 to-purple-500",
};
export default function TaskCard({ task, onComplete }: TaskCardProps) {
const [loading, setLoading] = useState(false);
const handleComplete = async () => {
setLoading(true);
await onComplete(task.id);
setLoading(false);
};
return (
{task.name}
{task.description}
{task.completed ? (
) : (
)}
);
}