import { Box, Stack, Typography, useTheme } from "@mui/material";
import Image from "next/image";

const ImageFormContent = ({ image, title }) => {
    const theme = useTheme();
    return (
        <Stack
            spacing={2}
            alignItems="center"
            justifyContent="center"
            sx={{
                my: 2,
                padding: 2,
                borderRadius: "12px",
                border: `1px solid ${theme.palette.primary.main}`,
            }}
        >
            <Typography
                variant="h6"
                sx={{
                    color: theme.palette.primary.dark,
                    fontWeight: "bold",
                }}
            >
                {title}
            </Typography>
            <Box sx={{ width: "100%", position: "relative", aspectRatio: "16/9" }}>
                <Image
                    src={image}
                    alt="Image"
                    fill={true}
                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    loading="lazy"
                    style={{
                        objectFit: "contain",
                        marginBottom: "16px",
                        borderRadius: "12px",
                        border: `1px solid ${theme.palette.divider}`,
                    }}
                />
            </Box>
        </Stack>
    );
};
export default ImageFormContent;