import { FC } from "react"
import { Bill } from "@/app/lib/db-types"
import Link from "next/link"
import { TicketIcon } from "@heroicons/react/24/outline"

export interface BillBadgeProps {
    locationId: string,
    bill: Bill
};

export const BillBadge:FC<BillBadgeProps> = ({ locationId, bill: { _id: billId, name, paid, hasAttachment, proofOfPayment }}) => {

    const className = `badge badge-lg ${paid?"badge-success":" badge-outline"} ${ !paid && hasAttachment ? "btn-outline btn-success" : "" }  cursor-pointer`;

    return (
        <Link href={`/home/bill/${locationId}-${billId}/edit`} className={className}>
            {name}
            {
                proofOfPayment?.uploadedAt ? 
                <TicketIcon className="h-[1em] w-[1em]  inline-block ml-1" /> : null
            }
        </Link>
    );
}