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

import type { DragEvent } from "react";

interface Props {
  sx?: SxProps<Theme>;
  icon: React.ReactNode;
  handleDrop?: (event: DragEvent<HTMLDivElement>) => void;
  text?: string;
  ref?: any;
}

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

  return (
    <Box
      onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
      onDrop={handleDrop}
      ref={ref}
      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>
  );
}