'use client';

import { FC } from "react";
import { BillingLocation } from "../lib/db-types";
import { formatYearMonth } from "../lib/format";
import { formatCurrency } from "../lib/formatStrings";
import { useTranslations } from "next-intl";
import { ViewBillBadge } from "./ViewBillBadge";

export interface ViewLocationCardProps {
    location: BillingLocation
}

export const ViewLocationCard:FC<ViewLocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => {

    const t = useTranslations("home-page.location-card");

    // sum all the billAmounts
    const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);

    return(
        <div data-key={_id } className="card card-compact card-bordered max-w-[30em] min-w-[350px] bg-base-100 border-1 border-neutral my-1">
            <div className="card-body">
                <h2 className="card-title mr-[2em] text-[1.3rem]">{formatYearMonth(yearMonth)} {name}</h2>
                <div className="card-actions mt-[1em] mb-[1em]">
                    {
                        bills.map(bill => <ViewBillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
                    }
                </div>
                {
                    monthlyExpense > 0 ?
                    <p className="text-[1.2rem]">
                        { t("payed-total-label") } <strong>${formatCurrency(monthlyExpense)}</strong>
                    </p>
                    : null
                }
            </div>
        </div>);
};