'use client'

import { memo } from 'react'
import { Card, Image } from '@nextui-org/react'

function ThumbnailList(props) {
  const { thumbnails, canvas } = props

  const handleSelectThumb = (canvasStatus) => {
    console.log('canvasStatus', canvasStatus.length)
    canvas?.clear() // 캔버스를 초기화합니다.
    canvas?.loadFromJSON(JSON.parse(canvasStatus), function () {
      canvas?.renderAll() // 캔버스를 다시 그립니다.
    })
  }

  return (
    <>
      <div className="flex justify-center m-4 w-full">
        {thumbnails.length > 0 &&
          thumbnails.map((thumbnail, index) => (
            <Card isFooterBlurred radius="lg" key={index} className="border-none m-2">
              <Image
                alt="Woman listing to music"
                className="object-cover"
                height={200}
                src={thumbnail.imageName}
                width={200}
                onClick={() => handleSelectThumb(thumbnail.canvasStatus)}
              />
            </Card>
          ))}
      </div>
    </>
  )
}

export default memo(ThumbnailList)