import clsx from "clsx";

type Media = {
  url: string;
};
type MediaGalleryProps = {
  items: Media[];
};

const MediaGallery = ({ items }: MediaGalleryProps) => {
  const maxItemsCount = 5;
  const remainingItemsCount = items.length - maxItemsCount;

  const getClassName = (index: number) => {
    if (items.length === 1) {
      return "col-span-12 / row-span-3";
    } else if (items.length === 2) {
      return "col-span-6 / row-span-1";
    } else if (items.length === 3) {
      if (index === 0) {
        return "col-span-12 / row-span-2";
      } else {
        return "col-span-6 / row-span-3";
      }
    } else if (items.length === 4) {
      return "col-span-6 / row-span-1";
    } else if (items.length > 4) {
      if (index < 2) return "col-span-6 / row-span-1";
      return "col-span-4 / row-span-1";
    }
    return "";
  };
  return (
    <div className="grid grid-cols-12 gap-2 grid-rows-[min-content] grid-rows-2">
      {items.slice(0, maxItemsCount).map((x, i) => (
        <div className={"relative rounded-lg aspect-square " + getClassName(i)}>
          <img alt="gallery-image" className="rounded-lg h-full" src={x.url} />
          {remainingItemsCount > 0 && i === maxItemsCount - 1 && (
            <div className="rounded-lg absolute h-full w-full top-0 left-0 flex items-center justify-center bg-black-40">
              <span className="text-mono-0 text-3xl font-bold leading-11 tracking-wide">
                +{remainingItemsCount}
              </span>
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

export { MediaGallery, MediaGalleryProps, Media };
