import React from "react";
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { AiOutlineClockCircle, AiOutlineTeam } from "react-icons/ai";

const Hero = ({title, img, time, members, formats}) => {
    return (
        <section className="h-[60vh] min-h-[300px]">
            <div className="mr-0 relative h-full flex items-center bg-gray-50">
                <div className="relative h-full max-sm:w-full ml-[calc(50%-768px)] max-lg:ml-[calc(50%-384px)] max-xl:ml-[calc(50%-512px)] max-2xl:ml-[calc(50%-640px)] max-md:mx-auto z-10 flex">
                    <h1 className="relative max-sm:w-full left-1/3 max-md:left-0 max-md:text-center leading-tight text-7xl max-lg:text-5xl max-xl:text-6xl max-md:text-4xl max-md:bg-white max-md:bg-opacity-70 max-md:p-3 font-bold italic min-w-[650px] max-md:min-w-0 max-lg:min-w-[430px] max-xl:min-w-[540px] text-slate-800 drop-shadow-[0_5px_5px_rgba(255,255,255,.3)] self-center">{title}</h1>
                    {(time || members || formats) &&
                        <div className="absolute bottom-3 max-md:bottom-0 flex items-center last:[&>p]:!mr-0 flex-wrap max-md:p-3 max-md:bg-gray-100">
                            {time && <p className="flex mr-4 items-center text-lg max-sm:text-sm text-slate-800"><AiOutlineClockCircle/>: {time}</p>}
                            {members && <p className="flex mr-4 items-center text-lg max-sm:text-sm text-slate-800"><AiOutlineTeam/>: {members}</p>}
                            {formats && <p className="max-sm:text-sm"><b>Доступные форматы:</b> {formats}</p>}
                        </div>
                    }
                    
                </div>
                <div className="basis-full h-[60vh] min-h-[300px] max-md:absolute max-md:w-full">
                    <GatsbyImage className='w-full h-[inherit]' image={getImage(img)} alt="logo" placeholder="none"/>
                </div>  
            </div>
        </section>
    )
}

export default Hero;