'use client';
import Image from 'next/image';
import React, { useState } from 'react';
interface IDetailImagesProps {
  imageData: {
    coverImage?: string;
    images?: {
      id: number;
      product: number;
      image: string;
    }[];
  };
}

const DetailImages = ({ imageData }: IDetailImagesProps) => {
  const [coverImage, setCoverImage] = useState(imageData.coverImage);

  return (
    <div className="w-full">
      <Image
        className="w-full brightness-95 max-h-[300px] min-h-[300px] object-cover border rounded-md shadow-sm"
        src={coverImage || ''}
        alt=""
        width={500}
        height={500}
      />
      {imageData.images && imageData.images.length > 1 && (
        <div className="mt-[5px] flex justify-between gap-2">
          {imageData.images?.map((item) => (
            <div
              onClick={() => setCoverImage(item.image)}
              key={item.id}
              className="flex-1"
            >
              <Image
                className="border brightness-95 shadow-sm cursor-pointer hover:border-primary duration-100 object-cover w-full rounded-sm max-h-[80px] min-h-[80px]"
                src={item.image}
                alt="detail-image"
                width={100}
                height={100}
              />
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default DetailImages;
