/* eslint-disable @typescript-eslint/no-explicit-any */
import Link from "next/link"

export default function RoomCard({
    title,
    room,
    image,
    color,
}: {
    title: string
    room: string
    image: any,
    color: string
}) {
    if(!image) return "No Image Available"
    return <Link href={`/testb?room=${room}`}>
        {image && <div
            style={{
                // minWidth: 500,
                width: '100%',
                height: 275,
                overflow: 'hidden',
                objectFit: 'cover',
                objectPosition: 'center'
            }}
            className='relative opacity-70 hover:opacity-90'
        >

            <div className='text-2xl text-center w-full text-shadow-black text-shadow-2xs text-white bg-transparent absolute z-20 top-0'>{title}</div>
            <img
                width={'100%'}
                height={275}
                style={{
                    filter: 'grayscale(100%)',
                    position: 'relative',
                    overflow: 'hidden'
                }}
                src={image}
                className='absolute top-0'
            />

            <div
                style={{
                    backgroundColor: color,
                    opacity: '50%',
                    // backgroundColor: 'rgba(100,27,198,0.5',
                    // width: 500,
                    width: '100%',
                    height: 275
                }}
                className='absolute top-0 bottom-0 left-0 right-0'
            >
            </div>
        </div>

        }

    </Link>
}