import { Image, Table } from "react-bootstrap";
import { formatDate } from "@/utils/helpers";
import { LeadsStatementResponse } from "@/Layout/Component/Dashboard/Reports/LeadStatemenet/types";
import styles from "@/styles/Component/Dashboard/DashboardTable.module.scss";

interface LeadStatementTableProps {
  data: LeadsStatementResponse[];
  onView: (id: number) => void;
  onDownload: (id: number) => void;
}

const LeadStatementTable = ({
  data,
  onView,
  onDownload
}: LeadStatementTableProps) => {
  return (
    <div className={styles.DashboardTable}>
       <Table className={styles.StyledTable}>
        <thead>
          <tr>
            <th>Dates</th>
            <th>Time</th>
            <th>Code</th>
            <th>Description</th>
            <th>VRM</th>
            <th>Make</th>
            <th>Model</th>
            <th>Debit</th>
            <th>Credit</th>
            <th>Balance</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {Array.isArray(data) && data.length > 0 ? (
            data.map((item, index) => (
              <tr key={index}>
                <td className="text-nowrap">{formatDate(item.date) ?? "-"}</td>
                <td className="text-nowrap">{item.time ?? "-"}</td>
                <td className="text-nowrap">{item.area_code ?? "-"}</td>
                <td className="text-nowrap">{item.area_name ?? "-"}</td>
                <td className="text-nowrap">{item.vrm ?? "-"}</td>
                <td className="text-nowrap">{item.make ?? "-"}</td>
                <td className="text-nowrap">
                  {item?.model?.length > 15
                    ? item.model.slice(0, 15) + "..."
                    : item?.model || "-"}
                </td>
                <td>{item.debit ?? "-"}</td>
                <td>{item.credit ?? "-"}</td>
                <td>{item.balance ?? "-"}</td>
                <td>
                  {item.member_lead_id ? (
                    <div className="d-flex align-items-center justify-content-center h-100 gap-2">
                      <button
                        className="border-0 bg-transparent"
                        onClick={() => onView(item.member_lead_id)}
                      >
                        <Image src="/assets/eyesIcon.png" alt="View details" width={20} />
                      </button>
                      <button
                        className="border-0 bg-transparent"
                        onClick={() => onDownload(item.member_lead_id)}
                      >
                        <Image src="/assets/downloadIcon.png" alt="Download" width={20} />
                      </button>
                    </div>
                  ) : (
                    <span className="text-danger">-</span>
                  )}
                </td>
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={11} className="text-center">
                No data available
              </td>
            </tr>
          )}
        </tbody>
      </Table>
    </div>
  );
};

export default LeadStatementTable;