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

const StyledBox = styled(Box)`
    padding: 90px 0;

    .info-container {
    }

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

        margin-bottom: 8px;
    }
    .info-subtitle {
        color: #1f1f1f;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;

        margin-bottom: 72px;
    }

    .info-card-inner {
    }

    .info-card-title {
        color: #1f6bbd;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        margin-bottom: 8px;
    }
    .info-card-text {
        color: #1f1f1f;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
    }
    .info-card-img {
        width: auto;
        height: 80px;
        display: block;
        margin-bottom: 20px;
    }

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

            .info-title {
                font-size: 24px;
                line-height: normal;
            }
            .info-subtitle {
                font-size: 16px;
            }
        }
    `}
`;

type Props = {};

const InfoSection = (props: Props) => {
    const [cards] = useState([
        {
            title: 'Havo Transporti',
            text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.`,
            imgSrc: '/static/images/icon1.png',
        },
        {
            title: 'Avtomobil Transporti',
            text: `We don’t store your banking credentials. Your data is only accessed by you and if you have given consent, by your finansial advisor.`,
            imgSrc: '/static/images/icon2.png',
        },
        {
            title: 'Dengiz Transporti',
            text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.`,
            imgSrc: '/static/images/icon3.png',
        },
        {
            title: 'Dengiz Transporti',
            text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.`,
            imgSrc: '/static/images/icon3.png',
        },
    ]);

    return (
        <StyledBox>
            <Container className='info-container'>
                <Typography className='info-title' data-aos='fade-up'>
                    Lorem ipsum dolor sit amet, consectetur adipiscing
                </Typography>
                <Typography className='info-subtitle' data-aos='fade-up'>
                    Lorem ipsum dolor sit amet, consectetur adipiscing
                </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='info-card-inner'>
                                    <img src={card.imgSrc} className='info-card-img' alt='' />
                                    <Typography className='info-card-title'>{card.title}</Typography>
                                    <Typography className='info-card-text'>{card.text}</Typography>
                                </div>
                            </Grid>
                        );
                    })}
                </Grid>
            </Container>
        </StyledBox>
    );
};

export default InfoSection;
