import SvgIcon from '@mui/material/SvgIcon';
import { useState } from 'react'

type IconCardProps = {
    cardData: {
        icon: React.ReactNode;
        title: string;
        text: string;
    }
}

const IconCard = (props: IconCardProps) => {

	const [isHover, setIsHover] = useState(false);

	const handleMouseEnter = () => {
		setIsHover(true);
	};
	const handleMouseLeave = () => {
		setIsHover(false);
	};

	const styles: any = {
		cardBack: {
			backgroundColor: 'var(--purewhite)',
			borderRadius: '12px',
			marginBottom: '30px',
			display: 'flex',
			alignItems: 'center',
			flexWrap: 'wrap',
			justifyContent: 'centre',
			padding: '28px 22px',
			transition: 'var(--transition)',
			boxShadow: isHover ? 'rgba(149, 157, 165, 0.2) 0px 8px 24px' : 'none'
		},
		icon: {
			marginRight: '22px',
			padding: '11px',
			borderRadius: '4px',
			width: '56px',
			height: '56px',
			backgroundColor: 'var(--primary-color)'
		}
	}

  return (
    <div style={styles.cardBack} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
        <SvgIcon style={styles.icon}>
					{props.cardData.icon}
        </SvgIcon>
        <span>
					<h6>{props.cardData.title}</h6>
					<p>{props.cardData.text}</p>
        </span>
    </div>
  )
}

export default IconCard