/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable @typescript-eslint/no-unnecessary-condition */

/* eslint-disable jsx-a11y/img-redundant-alt */
import { truncateAddress } from 'utils/wallet'

export interface ClickableCollection {
  contractAddress: string
  name: string
  media: string
  onClick: () => void
}

export function CollectionsTable({ collections }: { collections: ClickableCollection[] }) {
  return (
    <table className="w-full divide-y divide-zinc-800 table-fixed">
      <thead>
        <tr>
          <th className="py-3.5 pr-3 pl-4 text-sm text-left sm:pl-0 text-infinity-blue" scope="col">
            Name
          </th>
          <th className="py-3.5 px-3 text-sm text-left text-infinity-blue" scope="col">
            Address
          </th>
        </tr>
      </thead>
      <tbody className=" bg-black">
        {collections
          ? collections?.map((collection) => (
              <tr
                key={collection.contractAddress}
                className="hover:bg-zinc-900 cursor-pointer"
                onClick={collection.onClick}
              >
                <td className="py-2 pr-3 pl-4 whitespace-nowrap sm:pl-0">
                  <div className="flex items-center">
                    <div className="shrink-0 w-11 h-11">
                      <img alt="Collection Image" src={collection.media} />
                    </div>
                    <div className="ml-4 font-medium text-white truncate">{collection.name}</div>
                  </div>
                </td>

                <td className="py-5 px-3 text-zinc-400 whitespace-nowrap">
                  <div className="text-left text-white">
                    {collection.contractAddress?.startsWith('stars')
                      ? truncateAddress(collection.contractAddress)
                      : collection.contractAddress}
                  </div>
                </td>
              </tr>
            ))
          : null}
      </tbody>
    </table>
  )
}