/* eslint-disable @next/next/no-img-element */
'use client';
import Container from '@/components/common/Container';
import NextLink from '@/components/common/NextLink';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { Box, Grid, Typography, css, styled } from '@mui/material';
import React, { useState } from 'react';

const StyledBox = styled(Box)`
    padding: 90px 0;
    background-image: url('/static/images/pricing-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;

    &:after {
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #07275ccc;

        content: '';
    }

    .pricing-container {
        position: relative;
        z-index: 3;
    }

    .pricing-title {
        color: #fff;
        text-align: center;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;

        margin-bottom: 78px;
    }

    .pricing-card-inner {
        border-radius: 16px;
        background: #fff;
        box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.06);
        padding: 25px 32px 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .pricing-card-title {
        color: #363636;
        text-align: center;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        margin-bottom: 12px;
    }
    .pricing-card-price {
        color: #0076be;
        text-align: center;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;
        margin-bottom: 12px;
    }
    .pricing-card-limit,
    .pricing-card-weight {
        color: #363636;
        text-align: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
        margin-bottom: 8px;
        span {
            color: #363636;
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 16px;
        }
    }
    .pricing-card-more {
        color: #0076be;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 16px;
        display: block;
        margin: 24px auto 0;
    }
    .pricing-card-text {
        color: #33517d;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        max-width: 276px;
        margin: 0 auto;
    }
    .pricing-card-img {
        width: 50px;
        height: 50px;
        display: block;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    ${({ theme }) => css`
        ${theme.breakpoints.down('md')} {
            padding: 40px 0;

            .pricing-title {
                font-size: 24px;
                line-height: normal;
                margin-bottom: 30px;
            }
        }
    `}
`;

type Props = {};

const Pricing = (props: Props) => {
    const t = useMyTranslation();
    const [cards] = useState([
        {
            title: 'pricing.pricing1.title',
            priceText: 'pricing.pricing1.price',
            limitDay: 'pricing.pricing1.limit',
            minWeight: 'pricing.pricing1.min_weight',
            imgSrc: '/static/images/airplane.svg',
        },
        {
            title: 'pricing.pricing2.title',
            priceText: 'pricing.pricing2.price',
            limitDay: 'pricing.pricing2.limit',
            minWeight: 'pricing.pricing2.min_weight',
            imgSrc: '/static/images/truck.svg',
        },
        {
            title: 'pricing.pricing3.title',
            priceText: 'pricing.pricing3.price',
            limitDay: 'pricing.pricing3.limit',
            minWeight: 'pricing.pricing3.min_weight',
            imgSrc: '/static/images/long-truck.svg',
        },
        {
            title: 'pricing.pricing4.title',
            priceText: 'pricing.pricing4.price',
            limitDay: 'pricing.pricing4.limit',
            minWeight: 'pricing.pricing4.min_weight',
            imgSrc: '/static/images/metro.svg',
        },
    ]);

    return (
        <StyledBox id='tariffs'>
            <Container className='pricing-container'>
                <Typography className='pricing-title' data-aos='fade-up'>
                    {t('pricing.title')}
                </Typography>
                <Grid container spacing={'28px'}>
                    {cards.map((card, index) => {
                        return (
                            <Grid item xs={12} sm={6} md={3} key={index} className='card' data-aos='fade-up'>
                                <div className='pricing-card-inner'>
                                    <img src={card.imgSrc} className='pricing-card-img' alt='' />
                                    <Typography className='pricing-card-title'>{t(card.title)}</Typography>
                                    <Typography className='pricing-card-price'>{t(card.priceText)}</Typography>
                                    <Typography className='pricing-card-limit'>
                                        {t('pricing.limit')} <span>{t(card.limitDay)}</span>
                                    </Typography>
                                    <Typography className='pricing-card-weight'>
                                        {t('pricing.min_weight')} <span>{t(card.minWeight)}</span>
                                    </Typography>
                                    <NextLink href='#' className='pricing-card-more'>
                                        {t('pricing.more')}
                                    </NextLink>
                                </div>
                            </Grid>
                        );
                    })}
                </Grid>
            </Container>
        </StyledBox>
    );
};

export default Pricing;
