import React, { memo } from "react";

function SkeletonBox({ className = "" }) {
  return (
    <div
      className={`animate-pulse rounded-xl bg-gray-200 ${className}`}
      aria-hidden="true"
    />
  );
}

export function ImageSkeletonGrid({ count = 12 }) {
  return (
    <div
      className="columns-1 gap-8 md:columns-2 xl:columns-3 2xl:columns-4 [&>*]:break-inside-avoid [&>*]:mb-8"
      role="presentation"
    >
      {Array.from({ length: count }, (_, i) => (
        <div key={i} className="rounded-xl overflow-hidden break-inside-avoid">
          <SkeletonBox className="aspect-[4/3] w-full" />
          <div className="mt-2 flex gap-2">
            <SkeletonBox className="h-4 w-12" />
            <SkeletonBox className="h-4 flex-1" />
          </div>
        </div>
      ))}
    </div>
  );
}

export function ImageSkeletonList({ count = 8 }) {
  return (
    <div className="flex flex-col gap-2" role="presentation">
      {Array.from({ length: count }, (_, i) => (
        <div
          key={i}
          className="flex items-center gap-4 rounded-md border border-gray-200 bg-white p-3"
        >
          <SkeletonBox className="h-16 w-24 shrink-0 rounded-md" />
          <SkeletonBox className="h-4 w-32" />
          <SkeletonBox className="h-4 w-24" />
          <SkeletonBox className="h-4 w-16 ml-auto" />
        </div>
      ))}
    </div>
  );
}

function ImageSkeleton({ variant = "grid", count }) {
  const c = count ?? (variant === "list" ? 8 : 12);
  return variant === "list" ? (
    <ImageSkeletonList count={c} />
  ) : (
    <ImageSkeletonGrid count={c} />
  );
}

export default memo(ImageSkeleton);