'client only';

import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
import { FC } from "react";
import { BillBadge } from "./BillBadge";
import { BillingLocation } from "../lib/db-types";
import { formatYearMonth } from "../lib/format";

export interface LocationCardProps {
    location: BillingLocation
}

export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => 
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
    <div className="card-body">
        <a href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
            <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
        </a>
        <h2 className="card-title">{formatYearMonth(yearMonth)} {name}</h2>
        <div className="card-actions">
            {
                bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)
            }
            <a href={`/bill/${_id}/add`} className="tooltip" data-tip="Add a new bill">
                <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
            </a>
        </div>
    </div>
</div>;