/* eslint-disable import/no-anonymous-default-export */
/* eslint-disable react/display-name */

import React, { memo } from "react";
import { Card, CardBody, CardFooter, Image, Button } from "@nextui-org/react";
import { difftime } from "@/lib/time";
import { useRouter } from "next/navigation";

export default memo(({ list }) => {
  const router = useRouter();

  return (
    <div className="gap-2 flex flex-wrap">
      {list?.map?.((item, index) => (
        <Card
          shadow="sm"
          className="w-[220px]"
          key={index}
          isPressable
          onPress={() => {
            router.push("/collectiondetail/" + item.id);
          }}
        >
          <CardBody className="overflow-visible p-0">
            <div 
              className="w-full object-cover h-[180px] flex justify-center items-center bg-gradient-to-r from-cyan-500 to-blue-500"
              >
                <span className="bg-clip-text text-transparent text-white text-lg">
                {item?.name?.substring(0,4).toUpperCase()}
                </span>
            </div>
          </CardBody>
          <CardFooter className="text-small justify-between">
            <b>{item.name}</b>
            <p className="text-default-500">{difftime(item.createdAt)}</p>
          </CardFooter>
        </Card>
      ))}
    </div>
  );
});