import Image from 'next/image';

function Images({ data }) {
    return (
        <div className='flex items-center mb-[8px] justify-center gap-[24px] w-full'>
            <Image
                className="rounded-[8px] overflow-hidden"
                src={data.images_clinic[0]}
                alt="img clinic"
                height={432}
                width={600}
            />
            <div className="grid grid-cols-2 gap-[24px]">
                <Image
                    className="rounded-[8px] overflow-hidden"
                    src={data.images_clinic[1]}
                    alt="img clinic"
                    height={204}
                    width={288}
                />
                <Image
                    className="rounded-[8px] overflow-hidden"
                    src={data.images_clinic[2]}
                    alt="img clinic"
                    height={204}
                    width={288}
                />
                <Image
                    className="rounded-[8px] overflow-hidden"
                    src={data.images_clinic[3]}
                    alt="img clinic"
                    height={204}
                    width={288}
                />
                <Image
                    className="rounded-[8px] overflow-hidden"
                    src={data.images_clinic[4]}
                    alt="img clinic"
                    height={204}
                    width={288}
                />
            </div>
        </div>
    )
}

export default Images