import Link from "next/link";
import moment from 'moment';
import { LuArrowDownToLine } from "react-icons/lu";

interface ISecondCopyOfBill {
    FaturasId: string;
    FaturasDataOriginal: string;
    FaturasValor: string;
    FaturasVendasId: string;
    IndividuosNome: string;
}

interface ITableSecondCopyOfBill {
    bills: ISecondCopyOfBill[];
}

export default function TableSecondCopyOfBill({ bills }: ITableSecondCopyOfBill) {

    function isExpiredInvoice(dataVencimento: string): boolean {
        const hoje = new Date();
        const dataBoleto = new Date(dataVencimento);
        return dataBoleto < hoje;
    }

    function ticketStatus(dataVencimento: string) {
        const expiredInvoice = isExpiredInvoice(dataVencimento);
        return (
            <p className={`font-poppins font-semibold ${expiredInvoice ? 'text-plamev-yellow-500' : 'text-plamev-green-700'}`}> {expiredInvoice ? 'Boleto Vencido' : 'Boleto Dentro do Prazo'}</p>
        );
    }

    return (
        <div className="overflow-x-auto mt-4">
            <table className="w-full text-left">
                <thead>
                    <tr>
                        <th className="py-2 border-b text-center">Boleto em aberto</th>
                        <th className="py-2 border-b text-center">Status</th>
                        <th className="py-2 border-b text-center">Baixar</th>
                    </tr>
                </thead>
                <tbody>
                    {!!bills && bills.map((item: ISecondCopyOfBill, key) =>
                        <tr key={key}>
                            <td className="py-2 border-b text-center">
                                {`${moment(item.FaturasDataOriginal).format('DD')} de ${moment(item.FaturasDataOriginal).locale('pt-br').format('MMMM')} de ${moment(item.FaturasDataOriginal).format('YYYY')}`}
                            </td>
                            <td className="py-2 border-b text-center">
                                {ticketStatus(item.FaturasDataOriginal)}
                            </td>
                            <td className="py-2 border-b flex justify-center">
                                <Link
                                    href={`https://boleto.plamev.com.br/visualizar/${item.FaturasId}`}
                                    className="bg-plamev-blue-500 text-white rounded-[6px] w-[142px] h-[36px] hover:bg-plamev-blue-600 flex items-center justify-center gap-2 font-poppins font-semibold"
                                    target="_blank"
                                >
                                    Abrir <LuArrowDownToLine />
                                </Link>
                            </td>
                        </tr>
                    )}
                </tbody>
            </table>
        </div>
    )
}