"use client";

import { FC } from "react";
import { formatYearMonth } from "../lib/format";
import { YearMonth } from "../lib/db-types";
import { formatCurrency } from "../lib/formatStrings";
import { redirect, useParams, useRouter } from "next/navigation";

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

export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense, expanded }) => {

  const router = useRouter();

  // setting the `month` will activate the accordion belonging to that month
  const handleChange = (event:any) => router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`)

  return(
    <div className="collapse collapse-plus bg-base-200 my-1">
      <input type="radio" name="my-accordion-3" checked={expanded} onChange={handleChange} /> 
      <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>
  )
};