import Image from 'next/image';
import type { ContentImage } from '@/models/content';

type Props = {
  images: ContentImage[];
};

export default function VerticalImageGallery({ images }: Props) {
  const sorted = [...images].sort((a, b) => a.order - b.order);

  return (
    <div className="flex flex-col w-full gap-10">
      {sorted.map((img, i) => (
        <div key={img.id} className="w-full">
          <Image
            src={img.url}
            alt={img.alt || 'KutuBuku'}
            width={0}
            height={0}
            sizes="100vw"
            className="w-full h-auto block"
            priority={i === 0}
          />
        </div>
      ))}
    </div>
  );
}