import styled from "styled-components";
import { respondTo } from "../../utils/responsive";

function Footer({ className }) {
    return (
        <StyledContainer className={className}>
            <p>
                Copyright© 2024 行政法人國家災害防救科技中心
                <span>All rights reserved.</span>
            </p>
        </StyledContainer>
    );
}

const StyledContainer = styled.footer`
    border-radius: 24px 24px 0px 0px;
    background: var(--main-color-e);
    padding: 24px 12px;

    // flex center
    display: flex;
    justify-content: center;
    align-items: center;

    font: var(--small-text-1);
    color: white;

    ${respondTo.lg} {
        font-size: 12px;
        padding: 16px 32px;
        text-align: center;

        span {
            display: block;
        }
    }
`;

export default Footer;
