"use client";

import Image from "next/image";
import { useState } from "react";
import styles from "./PortfolioGallery.module.css";

export default function PortfolioGallery({ images }: { images: string[] }) {
  const [active, setActive] = useState(0);
  const thumbs = images.slice(0, 3);

  return (
    <div className={styles.gallery}>
      <div className={styles.main}>
        <div className={styles.mainInner}>
          <Image
            src={images[active] ?? images[0]}
            alt=""
            fill
            className={styles.mainImg}
            sizes="(max-width: 900px) 100vw, 830px"
            priority
          />
        </div>
      </div>
      <div className={styles.thumbs}>
        {thumbs.map((src, index) => (
          <button
            key={`${src}-${index}`}
            type="button"
            className={active === index ? styles.thumbActive : styles.thumb}
            onClick={() => setActive(index)}
            aria-label={`Show image ${index + 1}`}
          >
            <span className={styles.thumbInner}>
              <Image
                src={src}
                alt=""
                fill
                className={styles.thumbImg}
                sizes="144px"
              />
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}