import styles from './style.module.css'
import { useContext } from 'react'
import AppContext from '../hooks/createContext'
import Image from 'next/image'

interface Item {
    id: number
    image: string
    name?: string
}
interface Iprops {
    list: Item[]
    label: string
    type: string
}
const CustomImageSelect = ({ list, label, type }: Iprops) => {
    const {
        taskResult: [taskResult],
        handleTaskResult,
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    } = useContext(AppContext)!

    return (
        <div className={styles.templateList}>
            <p className={`ag14-t ${styles.title}`}>{label}</p>
            <div className={styles.scroll}>
                {list.map((item, key) => {
                    return (
                        <div
                            className={`${styles.templateItem} ag12`}
                            key={key}
                            onClick={() => {
                                handleTaskResult(type, item.id)
                            }}
                        >
                            <Image
                                className={`${styles.image} ${
                                    taskResult?.[type] === item.id ? styles.activeItem : ''
                                }`}
                                src={item?.image || ''}
                                width={144}
                                height={144}
                                alt="template"
                                unoptimized
                            ></Image>
                            {item?.name}
                        </div>
                    )
                })}
            </div>
        </div>
    )
}

export default CustomImageSelect
