'use client';

/* eslint-disable @next/next/no-img-element */
import React from 'react';
import { Box, Typography, css, styled } from '@mui/material';
import { useMyTranslation } from '@/hooks/useMyTranslation';

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

    .partners-title {
        color: #0076be;
        text-align: center;
        font-size: 36px;
        font-style: normal;
        font-weight: 600;
        line-height: 40px;
        margin-bottom: 45px;
    }

    .partners-list-wrapper {
        display: flex;
        overflow-x: hidden;
        user-select: none;
        mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 10%, hsl(0 0% 0% / 1) 90%, hsl(0 0% 0% / 0));
    }

    .partners-list {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 1rem;
        min-width: 100%;
        animation: loop 15s linear infinite;
    }

    .partners-item {
        display: block;
        margin-inline: 2rem;
        width: auto;
    }

    @keyframes loop {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-100%);
        }
    }

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

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

            .partners-item {
                display: block;
                margin-inline: 1rem;
                width: 100%;
                max-width: 120px;
            }
        }
    `}
`;

type Props = {};

const PartnersSection = (props: Props) => {
    const t = useMyTranslation();
    const items = [
        { src: '/static/images/brand1.png' },
        { src: '/static/images/brand2.png' },
        { src: '/static/images/brand3.png' },
        { src: '/static/images/brand4.png' },
    ];

    return (
        <StyledBox>
            <Typography className='partners-title' data-aos='fade-up'>
                {t('our_partners')}
            </Typography>
            <Box className='partners-list-wrapper'>
                <Box className='partners-list'>
                    {items.map((item, index) => (
                        <img className='partners-item' key={index} src={item.src} alt='Diip.uz' />
                    ))}
                </Box>
                <Box className='partners-list'>
                    {items.map((item, index) => (
                        <img className='partners-item' key={index} src={item.src} alt='Diip.uz' />
                    ))}
                </Box>
            </Box>
        </StyledBox>
    );
};

export default PartnersSection;
