"use client";

import { RiPieChartLine } from "@remixicon/react";
import MoneyValues from "@/components/money-values";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

type AnalysisSummaryPanelProps = {
	totalInstallments: number;
	grandTotal: number;
	selectedCount: number;
};

export function AnalysisSummaryPanel({
	totalInstallments,
	grandTotal,
	selectedCount,
}: AnalysisSummaryPanelProps) {
	return (
		<Card className="border-primary/20">
			<CardHeader className="border-b">
				<div className="flex items-center gap-2">
					<RiPieChartLine className="size-4 text-primary" />
					<CardTitle className="text-base">Resumo</CardTitle>
				</div>
			</CardHeader>
			<CardContent className="flex flex-col gap-3 pt-4">
				{/* Total geral */}
				<div className="flex flex-col items-center gap-2 rounded-lg bg-primary/10 p-3">
					<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
						Total Selecionado
					</p>
					<MoneyValues
						amount={grandTotal}
						className="text-2xl font-bold text-primary"
					/>
					<p className="text-xs text-muted-foreground">
						{selectedCount} {selectedCount === 1 ? "parcela" : "parcelas"}
					</p>
				</div>

				{/* Mensagem quando nada está selecionado */}
				{selectedCount === 0 && (
					<div className="rounded-lg bg-muted/50 p-3 text-center">
						<p className="text-xs text-muted-foreground">
							Selecione parcelas para ver o resumo
						</p>
					</div>
				)}
			</CardContent>
		</Card>
	);
}
