import React from "react";

import { TableBody, TableHead, TableRow } from "@mui/material";

import Table from "../../../components/Table";
import { TableCell } from "../../../components/Table/TableCell";
import TableHeading from "../../../components/Table/TableHeading";
import { useI18n } from "../../../contexts/I18nContext";
import { AssetList } from "../types/asset";
import { ArticleAsset } from "../types/contrib";

export interface ProductAssetsTableProps {
  assets: AssetList[] | ArticleAsset[];
}

export const ProductAssetsTable: React.FC<ProductAssetsTableProps> = ({ assets }) => {
  const { t } = useI18n();

  return (
    <Table count={assets.length}>
      <TableHead>
        <TableRow>
          <TableHeading>{t("Asset ID")}</TableHeading>
          <TableHeading align="right">{t("Type")}</TableHeading>
          <TableHeading align="right">{t("Caption")}</TableHeading>
        </TableRow>
      </TableHead>

      <TableBody
        sx={{ ".MuiTableRow-root:last-child > .MuiTableCell-root": { borderBottom: "none" } }}
      >
        {assets.map((asset) => (
          <TableRow key={asset.id} sx={{ height: 56 }}>
            <TableCell sx={{ py: 0 }}>
              <a href={asset.url} rel="noreferrer" target="_blank">
                {asset.id}
              </a>
            </TableCell>
            <TableCell align="right" sx={{ py: 0 }}>
              {asset.asset_type}
            </TableCell>
            <TableCell align="right" sx={{ py: 0 }}>
              {asset.caption}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};