import { FC } from "react";
import { Bill } from "@evidencija-rezija/shared-code";
import Link from "next/link";
import { TicketIcon } from "@heroicons/react/24/outline";
import { useLocale } from "next-intl";

export interface ViewBillBadgeProps {
    locationId: string;
    shareId?: string;
    bill: Bill;
};

export const ViewBillBadge: FC<ViewBillBadgeProps> = ({ locationId, shareId, bill: { _id: billId, name, paid, attachment, proofOfPayment } }) => {

    const currentLocale = useLocale();

    const className = `badge badge-lg p-[1em] ${paid ? "badge-success" : " badge-outline"} ${!paid && !!attachment ? "btn-outline btn-success" : ""}  cursor-pointer`;

    // Use shareId if available (for shared views), otherwise use locationId (for owner views)
    const billPageId = shareId || locationId;

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