"use client";

import { useState } from "react";
import VerificationStamp from "./VerificationStamp";

interface GalleryProps {
  images: string[];
  showStamp?: boolean;
}

export default function Gallery({ images, showStamp }: GalleryProps) {
  const [active, setActive] = useState(0);

  return (
    <div className="mb-12">
      <div className="relative h-[280px] sm:h-[380px] bg-gradient-to-br from-mist to-sage border border-mist rounded-lg flex items-center justify-center mb-3">
        <span className="font-mono text-xs uppercase tracking-widest text-ink-soft">
          {images[active]}
        </span>
        {showStamp && (
          <VerificationStamp variant="property" size={72} className="absolute top-4 right-4" />
        )}
      </div>
      <div className="flex gap-3 overflow-x-auto pb-1">
        {images.map((label, i) => (
          <button
            key={label}
            onClick={() => setActive(i)}
            className={`flex-shrink-0 w-[120px] h-20 rounded-sm border-2 bg-gradient-to-br from-mist to-sage font-mono text-[11px] uppercase tracking-wider text-ink-soft transition-colors ${
              active === i ? "border-forest" : "border-transparent"
            }`}
          >
            {label}
          </button>
        ))}
      </div>
    </div>
  );
}