import React from 'react'
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
import partner1 from '../../../assets/1.png'
import partner2 from '../../../assets/2.png'
import partner3 from '../../../assets/3.png'
import partner4 from '../../../assets/4.png'
import partner5 from '../../../assets/5.png'
import partner6 from '../../../assets/6.png'
import partner7 from '../../../assets/7.png'
import { Container, Text, Image, Button, Spacer } from '@nextui-org/react';

const Partners = () => {
    const responsive = {
        superLargeDesktop: {
          // the naming can be any, depends on you.
          breakpoint: { max: 4000, min: 3000 },
          items: 7
        },
        desktop: {
          breakpoint: { max: 3000, min: 1024 },
          items: 5
        },
        tablet: {
          breakpoint: { max: 1024, min: 464 },
          items: 3
        },
        mobile: {
          breakpoint: { max: 464, min: 0 },
          items: 2
        }
    }

  return (
    <>
    <Container fluid css={{ maxWidth: '100%', p: '0' }}>
      <Spacer y={3} />
      <Text h1 color='white' css={{ textAlign: 'center' }} > Phygital NFT Project Partners </Text>
      <Spacer y={2} />
      <div style={{ background: '#1a222c', padding: '1rem' }} >
      <Carousel infinite autoPlay autoPlaySpeed={2000} centerMode={true} responsive={responsive} renderButtonGroupOutside={false} arrows={false} pauseOnHover={false}  >
        <Image src={partner1} alt={partner1} css={{  }} width='150px' height='100px' objectFit='contain' showSkeleton />
        <Image src={partner2} alt={partner2} width='150px' height='100px' objectFit='contain' showSkeleton />
        <Image src={partner3} alt={partner3} width='150px' height='100px' objectFit='contain' showSkeleton />
        <Image src={partner4} alt={partner4} width='150px' height='100px' objectFit='contain' showSkeleton />
        <Image src={partner5} alt={partner5} width='150px' height='100px' objectFit='contain' showSkeleton />
        <Image src={partner6} alt={partner6} width='150px' height='100px' objectFit='contain' showSkeleton />
        <Image src={partner7} alt={partner7} width='150px' height='100px' objectFit='contain' showSkeleton />
      </Carousel>
      </div>
      <Spacer y={5} />
    </Container>
    </>
  )
}

export default Partners