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

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

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

    const currentLocale = useLocale();

    return (
        <Link href={`/${currentLocale}//share/bill/${locationId}-${billId}`} className={`badge badge-lg p-[1em] ${paid ? "badge-success" : " badge-outline"} ${!paid && !!attachment ? "btn-outline btn-success" : ""}  cursor-pointer`}>
            <TicketIcon className="h-[1em] w-[1em]  inline-block mr-1" /> {name}
        </Link>
    );
}