import { Grid, Icon } from '@mui/material'
import Image from 'next/image'
import React from 'react'
import IconCard from './IconCard'
import ElectricBoltIcon from '@mui/icons-material/ElectricBolt';
import SpeedIcon from '@mui/icons-material/Speed';
import HandshakeIcon from '@mui/icons-material/Handshake';
import WorkspacePremiumIcon from '@mui/icons-material/WorkspacePremium';

const cardsData = [
    {
        icon: <ElectricBoltIcon />,
        title: 'Fast turn around',
        text: 'Recieve your product quickly'
    },
    {
        icon: <SpeedIcon />,
        title: 'High performance',
        text: 'Hight performing websites and applications'
    },
    {
        icon: <HandshakeIcon />,
        title: 'Trusted services',
        text: 'Trusted by international clients'
    },
    {
        icon: <WorkspacePremiumIcon />,
        title: 'Quality assurance',
        text: 'Get the best product every time'
    },
]

const ChooseUs = () => {
  return (
    <>
        <div className="section">
            <Grid container spacing={8}>
                <Grid item xs={5}>
                    <>
                    <div style={{maxWidth: '360px'}}>
                        <h3>Why choose us</h3>
                        <p style={{marginBottom: '40px'}}>A good design translates to better sales, don't comprimise, get better results for your business.</p>
                    </div>
                    {cardsData.map((cardData) => (
                        <IconCard key={cardData.title} cardData={cardData} />
                    ))}
                    </>
                </Grid>
                <Grid className='col centered justified' item xs={7}>
                    <Image 
                        style={{
                            objectFit: 'cover',
                            borderRadius: '16px'
                        }}
                        src='/chooseUs.jpg' 
                        width={643} 
                        height={570} 
                        alt='choose us image'
                    />
                </Grid>
            </Grid>
        </div>
    </>
  )
}

export default ChooseUs