import { Container, Typography } from '@mui/material';
import { useTranslation } from 'next-i18next';
import Image from 'next/image';

type FeatureItemProps = {
    image: string;
    alt: string;
    description: string;
}

const FeatureItem: React.FC<FeatureItemProps> = ({ image, alt, description }) => {
    const { t } = useTranslation('home');
    return (
        <Container
            sx={{
                textAlign: 'center',
                display: 'flex',
                flexDirection: 'column',
                marginTop: { xs: '50px' },
            }}
        >
            <Image src={image} alt={alt} width={100} height={100} />
            <Typography
                sx={{
                    mt: 6,
                    px: 6,
                }}
            >
                {t(description)}
            </Typography>
        </Container>
    );
};

export default FeatureItem;