import { FC } from "react";
import { formatYearMonth } from "../lib/format";
import { YearMonth } from "../lib/db-types";
import { formatCurrency } from "../lib/formatStrings";

export interface MonthCardProps {
    yearMonth: YearMonth,
    children?: React.ReactNode,
    monthlyExpense:number
}

export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense }) =>
<div className="collapse collapse-plus bg-base-200 my-1">
  <input type="radio" name="my-accordion-3" /> 
  <div className="collapse-title text-xl font-medium">
    {`${formatYearMonth(yearMonth)}`}
    {
      monthlyExpense>0 ?
        <p className="text-xs font-medium">
          Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong>
        </p> : null
    }
  </div>
  <div className="collapse-content"> 
    {children}
  </div>
</div>