'use client'
import Image from 'next/image'
import { useState } from 'react'

interface Props {
  images: string[]
  title: string
  noDeposit?: boolean
}

export default function CarImageGallery({ images, title, noDeposit }: Readonly<Props>) {
  const [selected, setSelected] = useState(0)

  if (images.length === 0) {
    return (
      <div className="relative rounded-2xl overflow-hidden bg-[#f1f3f7] aspect-[16/10] flex items-center justify-center text-[#adb7c7]">
        <svg viewBox="0 0 120 60" className="w-40 h-20" fill="currentColor">
          <path d="M14 38l10-18h62l10 18H14z" opacity=".25"/>
          <circle cx="28" cy="46" r="8" opacity=".4"/>
          <circle cx="92" cy="46" r="8" opacity=".4"/>
        </svg>
      </div>
    )
  }

  return (
    <div className="space-y-3">
      {/* Main image */}
      <div className="relative rounded-2xl overflow-hidden bg-[#f1f3f7] aspect-[16/10]">
        <Image
          src={images[selected]}
          alt={`${title} rental Dubai`}
          fill
          className="object-cover transition-opacity duration-200"
          sizes="(max-width: 1024px) 100vw, 60vw"
          priority={selected === 0}
        />
        {noDeposit && (
          <span className="absolute top-3 left-3 bg-emerald-500 text-white text-xs font-bold px-3 py-1 rounded-full">
            No Deposit
          </span>
        )}
        {images.length > 1 && (
          <span className="absolute bottom-3 right-3 bg-black/50 text-white text-xs px-2.5 py-1 rounded-full">
            {selected + 1} / {images.length}
          </span>
        )}
      </div>

      {/* Thumbnail strip */}
      {images.length > 1 && (
        <div className="flex gap-2 flex-wrap">
          {images.map((img, i) => (
            <button
              key={i}
              onClick={() => setSelected(i)}
              aria-label={`View image ${i + 1}`}
              className={`relative w-16 h-16 rounded-xl overflow-hidden border-2 flex-shrink-0 transition-all ${
                i === selected
                  ? 'border-brand shadow-md'
                  : 'border-transparent opacity-55 hover:opacity-100 hover:border-[#e2e6ed]'
              }`}
            >
              <Image
                src={img}
                alt={`${title} image ${i + 1}`}
                fill
                className="object-cover"
                sizes="64px"
              />
            </button>
          ))}
        </div>
      )}
    </div>
  )
}