import type { DragEvent } from "react";

import Box from "@mui/material/Box";
import { alpha, useTheme } from "@mui/material/styles";

import CloudUploadOutlinedIcon from "@mui/icons-material/CloudUploadOutlined";

import {
  getBorderColor,
  getSoftBg,
} from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/add-dashboard-issue-dialog-styles";

type UploadIconButtonProps = {
  onDragOver: (event: DragEvent<HTMLDivElement>) => void;
  onDrop: (event: DragEvent<HTMLDivElement>) => void;
  onUploadClick: () => void;
};

export function UploadIconButton({
  onDragOver,
  onDrop,
  onUploadClick,
}: UploadIconButtonProps) {
  const theme = useTheme();

  return (
    <Box
      onClick={onUploadClick}
      onDrop={onDrop}
      onDragOver={onDragOver}
      sx={{
        width: 64,
        height: 58,
        borderRadius: "8px",
        bgcolor: getSoftBg(theme),
        border: `1px dashed ${getBorderColor(theme)}`,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        cursor: "pointer",
        "&:hover": {
          bgcolor: alpha(theme.palette.primary.main, 0.1),
          borderColor: theme.palette.primary.main,
        },
      }}
    >
      <CloudUploadOutlinedIcon
        sx={{ fontSize: 30, color: theme.palette.primary.main }}
      />
    </Box>
  );
}