"use client";

import Image from "next/image";
import { useState } from "react";

interface TripImage {
  id: string;
  url: string;
  caption: string | null;
}

export function ImageGallery({ images }: { images: TripImage[] }) {
  const [activeIndex, setActiveIndex] = useState(0);

  if (images.length === 0) {
    return (
      <div className="flex h-44 items-center justify-center bg-linear-to-br from-primary-800 to-secondary-900 sm:h-56 lg:h-72">
        <span className="text-5xl sm:text-6xl">🏔️</span>
      </div>
    );
  }

  const activeImage = images[activeIndex];

  return (
    <div>
      {/* Main Image */}
      <div className="relative h-44 bg-neutral-900 sm:h-56 lg:h-72">
        <Image
          src={activeImage.url}
          alt={activeImage.caption || "Foto trip"}
          fill
          className="object-cover"
          sizes="(max-width: 768px) 100vw, 768px"
          priority
        />
        {activeImage.caption && (
          <div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 sm:px-4 sm:pb-3 sm:pt-8">
            <p className="text-xs font-medium text-white sm:text-sm">
              {activeImage.caption}
            </p>
          </div>
        )}
        {/* Counter */}
        <div className="absolute right-2 top-2 rounded-full bg-black/50 px-2 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm sm:right-3 sm:top-3 sm:px-2.5 sm:py-1 sm:text-xs">
          {activeIndex + 1} / {images.length}
        </div>
      </div>

      {/* Thumbnails */}
      {images.length > 1 && (
        <div className="flex gap-1 overflow-x-auto bg-neutral-100 p-1.5 sm:gap-1.5 sm:p-2">
          {images.map((img, i) => (
            <button
              key={img.id}
              onClick={() => setActiveIndex(i)}
              className={`relative h-11 w-16 shrink-0 overflow-hidden rounded-md transition-all sm:h-14 sm:w-20 sm:rounded-lg ${
                i === activeIndex
                  ? "ring-2 ring-primary-500 ring-offset-1"
                  : "opacity-60 hover:opacity-100"
              }`}
            >
              <Image
                src={img.url}
                alt={img.caption || `Foto ${i + 1}`}
                fill
                className="object-cover"
                sizes="80px"
              />
            </button>
          ))}
        </div>
      )}
    </div>
  );
}