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

export interface BillBadgeProps {
    locationId: string,
    bill: Pick<Bill, 'name' | 'paid' | 'hasAttachment' | 'proofOfPayment'>,
    onClick?: () => void
};

export const BillToggleBadge:FC<BillBadgeProps> = ({ bill: { name, paid, hasAttachment, proofOfPayment }, onClick}) => {

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

    return (
        <div className={className} onClick={onClick}>
            {name}
            {
                proofOfPayment?.uploadedAt ? 
                <TicketIcon className="h-[1em] w-[1em]  inline-block ml-1" /> : null
            }
        </div>
    );
}