import Image, {StaticImageData} from "next/image";
import styles from './WideChoiceItem.module.css';

export type WideChoiceItemProps = {
    imgSrc: StaticImageData,
    name: string,
    alt: string,
};

export function WideChoiceItem({imgSrc, name, alt, ...otherProps}: WideChoiceItemProps) {
    return (
        <div className={styles.root} {...otherProps}>
            <div className={styles.container}>
                <div className={styles.imageContainer}>
                    <Image src={imgSrc} alt={alt} sizes='100vw' placeholder={'blur'}/>
                </div>
                <div className={styles.name}>
                    <p>{name}</p>
                </div>
            </div>
        </div>
    );
};