import {Card, Metric, Text, Title} from "@tremor/react";
import {Data} from "@/app/fetchData";

export function SubjectOverviewCard({
                                        title,
                                        data,
                                        projectId,
                                    }: {
    title?: string,
    data: Data,
    projectId: number,
}) {
    const project = data.projects.find((project) => project.projectId === projectId)!;
    const totalDuration = data.timeEntries
        .filter((entry) => entry.projectId === projectId)
        .map((entry) => entry.duration)
        .reduce((a, b) => a + b, 0);


    return (
        <Card style={{borderColor: project?.color}} decoration={'left'}>
            <Title>{title ?? project?.name}</Title>
            <Text>Total</Text>
            <Metric>{(totalDuration / (60 * 60)).toFixed(2)} hours</Metric>
        </Card>
    )
}