/* eslint-disable @next/next/no-img-element */
'use client';
import Container from '@/components/common/Container';
import { Box, Grid, Stack, Typography, css, styled } from '@mui/material';
import React, { useRef, useState } from 'react';
import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper/modules';
import { useMyTranslation } from '@/hooks/useMyTranslation';

const StyledBox = styled(Box)`
    padding: 90px 0;
    background-image: url('/static/images/news-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: '';
    }

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

    .news-header {
        margin-bottom: 48px;
    }

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

        margin-bottom: 16px;
    }
    .news-subtitle {
        color: #fff;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        max-width: 484px;
    }

    .card {
        height: auto;
    }

    .news-card-inner {
        border-radius: 16px;
        background: #fff;
        box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.06);
        overflow: hidden;
        height: 100%;
    }

    .news-card-title {
        color: #1f6bbd;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 18px;

        margin-bottom: 8px;
    }
    .news-card-text {
        color: #33517d;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 15px;
    }
    .news-card-img {
        width: 100%;
        height: 175px;
        display: block;
        margin: 0 auto;
        object-fit: cover;
    }

    .news-card-text-wrapper {
        padding: 12px 20px 15px;
    }

    .my-slide-btn {
        border-radius: 50%;
        background-color: #fff;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        transition: opacity 0.3s ease;
        cursor: pointer;
        &:hover {
            opacity: 0.8;
        }
        &:active {
            opacity: 0.6;
        }
    }

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

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

type Props = {};

const NewsSection = (props: Props) => {
    const t = useMyTranslation();
    const swiperRef = useRef<SwiperRef>(null);
    const [cards] = useState([
        {
            title: '15 Latest Development in Webflow.',
            text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt consectetur adipiscing elit...`,
            imgSrc: '/static/images/news1.png',
            id: 1,
        },
        {
            title: 'Create your wedding website',
            text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt consectetur adipiscing elit...`,
            imgSrc: '/static/images/news2.png',
            id: 2,
        },
        {
            title: 'Schedule ceremony site tours',
            text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt consectetur adipiscing elit...`,
            imgSrc: '/static/images/news3.png',
            id: 3,
        },
        {
            title: 'Write a sweet note to your partner',
            text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt consectetur adipiscing elit...`,
            imgSrc: '/static/images/news4.png',
            id: 4,
        },
        {
            title: '15 Latest Development in Webflow.',
            text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt consectetur adipiscing elit...`,
            imgSrc: '/static/images/news1.png',
            id: 5,
        },
        {
            title: 'Create your wedding website',
            text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt consectetur adipiscing elit...`,
            imgSrc: '/static/images/news2.png',
            id: 6,
        },
        {
            title: 'Schedule ceremony site tours',
            text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt consectetur adipiscing elit...`,
            imgSrc: '/static/images/news3.png',
            id: 7,
        },
        {
            title: 'Write a sweet note to your partner',
            text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt consectetur adipiscing elit...`,
            imgSrc: '/static/images/news4.png',
            id: 8,
        },
    ]);

    const slidePrev = () => {
        swiperRef.current?.swiper.slidePrev();
    };

    const slideNext = () => {
        swiperRef.current?.swiper.slideNext();
    };

    return (
        <StyledBox>
            <Container className='news-container'>
                <Stack
                    direction={{ xs: 'column', md: 'row' }}
                    alignItems={'flex-end'}
                    justifyContent={'space-between'}
                    className='news-header'
                    spacing={3}
                >
                    <Box>
                        <Typography className='news-title' data-aos='fade-up'>
                            {t('news')}
                        </Typography>
                        <Typography className='news-subtitle' data-aos='fade-up'>
                            {t('news_subtitle')}
                        </Typography>
                    </Box>
                    <Stack direction={'row'} alignItems={'center'} spacing={2} data-aos='fade-up'>
                        <button className='my-slide-btn' onClick={slidePrev}>
                            <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'>
                                <path
                                    d='M7.8284 13.0001L13.1924 18.3641L11.7782 19.7783L4 12.0001L11.7782 4.222L13.1924 5.6362L7.8284 11.0001L20 11.0001L20 13.0001L7.8284 13.0001Z'
                                    fill='#0076BE'
                                />
                            </svg>
                        </button>
                        <button className='my-slide-btn' onClick={slideNext}>
                            <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'>
                                <path
                                    d='M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z'
                                    fill='#0076BE'
                                />
                            </svg>
                        </button>
                    </Stack>
                </Stack>

                <Box data-aos='fade-up'>
                    <Swiper
                        modules={[Autoplay]}
                        autoplay={{
                            delay: 4500,
                            disableOnInteraction: false,
                        }}
                        loop={true}
                        breakpoints={{
                            100: {
                                slidesPerView: 1,
                                spaceBetween: 20,
                            },
                            600: {
                                slidesPerView: 2,
                                spaceBetween: 20,
                            },
                            900: {
                                slidesPerView: 3,
                                spaceBetween: 30,
                            },
                            1100: {
                                slidesPerView: 4,
                                spaceBetween: 35,
                            },
                        }}
                        ref={swiperRef}
                    >
                        {cards.map((card, index) => {
                            return (
                                <SwiperSlide className='card' key={card.id}>
                                    <div className='news-card-inner'>
                                        <img src={card.imgSrc} className='news-card-img' alt='' />
                                        <div className='news-card-text-wrapper'>
                                            <Typography className='news-card-title'>{card.title}</Typography>
                                            <Typography className='news-card-text'>{card.text}</Typography>
                                        </div>
                                    </div>
                                </SwiperSlide>
                            );
                        })}
                    </Swiper>
                </Box>
            </Container>
        </StyledBox>
    );
};

export default NewsSection;
