import styled, { css, keyframes } from 'styled-components'
import { respondTo } from '../../utils/responsive';
import { ImageWrapper } from '../../components/MediaWrapper';
import { GoButton } from '../../components/BorderShadowButton';

function CatPawIntro({ image, className, isIn, onClick }) {
    return (
        <Intro $isIn={isIn} className={className}>
            <ImageWrapper src={image} alt="" />
            <GoButton
                text="GO"
                size="s"
                className="go-button"
                onClick={onClick}
            />
        </Intro>
    );
}

const handAnimation = keyframes`
    0% {
        transform: rotate3d(1, 0, 0, 40deg);
    }
    100% {
        transform: rotate3d(1, 0, 0, 0deg);
    }
`;

const handAnimationMobile = keyframes`
    0% {
        transform: translate(-50%, -50%) rotate3d(1, 0, 0, 40deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate3d(1, 0, 0, 0deg);
    }
`;

const Intro = styled.div`
    position: absolute;
    inset: 0;

    perspective: 1000px;
    transform-origin: center center;

    z-index: 5;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);

    opacity: 0;
    pointer-events: none;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;

        transform-origin: center bottom;

        ${respondTo.sm} {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            width: 806px;
            height: 458px;
        }
    }

    button {
        position: absolute;
        bottom: 94px;
        left: 51%;
        transform: translateX(-50%);

        width: 82px;
        height: 44px;

        opacity: 0;
        cursor: none;

        ${respondTo.sm} {
            bottom: 20%;
            width: 200px;
            height: 200px;
        }
    }

    ${(props) =>
        props.$isIn &&
        css`
            opacity: 1;
            pointer-events: auto;

            img {
                animation: ${handAnimation} 0.4s ease-out 1;

                ${respondTo.sm} {
                    animation: ${handAnimationMobile} 0.4s ease-out 1;
                }
            }
        `}
`;

export default CatPawIntro;