import React from 'react';
import { Box, Typography, Button } from '@mui/material';

const Hero = ({ backgroundImage, useGradient, title, titleColor, text, textColor }) => {
    // Priorité pour appliquer le fond : Image > Dégradé > Aucun fond
    const backgroundStyle = backgroundImage
        ? `url(${backgroundImage}) center/cover no-repeat`
        : useGradient
        ? 'linear-gradient(to bottom, #0e467f, rgb(9, 48, 87))'
        : '#0e467f'; // Fallback couleur

    return (
        <Box
            sx={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                height: { xs: '50vh', md: '70vh', lg: '80vh' }, // Responsive
                background: backgroundStyle,
                color: 'white',
                textAlign: 'center',
                padding: '20px',
                transition: 'background 0.5s ease-in-out', // Transition fluide pour le fond
            }}
        >
            {/* Titre */}
            <Typography
                variant="h1"
                sx={{
                    fontWeight: 'bold',
                    mb: 2,
                    color: titleColor || '#ffffff', // Couleur par défaut
                    fontSize: { xs: '3rem', md: '3rem', lg: '4rem' }, // Responsive
                }}
            >
                {title}
            </Typography>

            {/* Texte */}
            <Typography
                variant="body1"
                sx={{
                    mb: 4,
                    color: textColor || '#ffffff', // Couleur par défaut
                    fontSize: { xs: '1rem', md: '1.2rem', lg: '1.5rem' }, // Responsive
                }}
            >
                {text}
            </Typography>

            {/* Bouton */}
            <Button
                variant="contained"
                color="secondary"
                size="large"
                href="/posts"
                sx={{
                    textTransform: 'none',
                    fontWeight: 'bold',
                    padding: { xs: '10px 20px', md: '15px 30px' }, // Responsive
                    fontSize: { xs: '0.8rem', md: '1rem' },
                }}
            >
                Explorer les Articles
            </Button>
        </Box>
    );
};

export default Hero;