import { List } from "flowbite-react";
import { FC } from "react";
import { twMerge } from "tailwind-merge";
import { TSclientSchema } from "../forms/schema/client";
type Props = {
  client: TSclientSchema;
};

const ClientPaymentInfo: FC<Props> = ({ client }) => {
  const status_color = client?.status === 0 ? "text-red-600" : "";
  const bill_due = client?.invoiceDue?.reduce(
    (acc, invoice: any) => acc + invoice?.after_discount_amount,
    0
  );
  return (
    <>
      <div className="flex items-center">
        <div className={twMerge("mr-2 h-2.5 w-2.5 rounded-full")} />
        <List>
          <List.Item
            className={`!mb-2 block font-medium text-gray-800 dark:text-gray-400 ${status_color}`}
          >
            Due : <span className="capitalize">{bill_due ?? 0} TK/-</span>
          </List.Item>
          <List.Item
            className={`!mb-2 block dark:text-gray-400 font-medium text-gray-800 ${status_color}`}
          >
            Deadline : {client?.payment_deadline || "None"}
          </List.Item>
        </List>
      </div>
    </>
  );
};

export default ClientPaymentInfo;