import { Box, Typography, useTheme } from "@mui/material";
import { SxProps, Theme } from "@mui/material/styles";


interface Props {
    sx?: SxProps<Theme>;
    icon: React.ReactNode;
    text?: string;
}

export default function UploadBox({ sx, icon, text }: Props) {
    const theme = useTheme();

    return (
        <Box sx={{
            width: "100%",
            height: "120px",
            position: "relative",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: theme.palette.background.default,
            border: `1px solid ${theme.palette.grey2.main}`,
            borderRadius: "8px",
            ...sx,
        }}>
            {icon}
            <Typography sx={{
                position: "absolute",
                right: "10px",
                bottom: "10px",
                color: theme.palette.orange.main,
                fontSize: "16px",
                lineHeight: "19px",
                textDecoration: "underline",
            }}>{text}</Typography>
        </Box>
    );
}