import { OpacityIn } from "@/effect"
import styled from "styled-components"

const FigureElement = styled.figure`
    margin: 0;
    position: relative;
    height: 350px;
    .img-wrapper {
        height: 100%;
        width: 100%;
        filter: brightness(0.75);
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: top -100px right 0;
            display: block;
        }
    }
    .mask {
        background: url(data:image/webp;base64,UklGRkYAAABXRUJQVlA4WAoAAAAQAAAAAQAAAQAAQUxQSAUAAAAA/wAAAABWUDggGgAAADABAJ0BKgIAAgAAwBIlpAADcAD+/u6qAAAA);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
    }
    figcaption {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: white;
        padding: 15px 20px;
        font-size: 2em;
        text-align: justify;
    }
`

export function Hero() {
    return (
        <FigureElement>
            <OpacityIn className="img-wrapper">
                {/* <img
                    src="https://api.r10086.com/%E5%9B%BE%E5%8C%85webp/%E5%8A%A8%E6%BC%AB%E7%BB%BC%E5%90%882/48cf0b92dd80ccdd4898e6b4734105fc.png!q90.webp"
                    alt="月宫"
                /> */}
            </OpacityIn>
            <div className="mask"></div>
            <figcaption>珠光照月，斑驳裂影。桃艳压山，风月无边。</figcaption>
        </FigureElement>
    )
}