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

import { getBorderColor } from "@/features/pswg/working-group/components/add-working-group-issue-dialog/add-working-group-issue-dialog-styles";

type DialogFooterProps = {
  isFormFilled: boolean;
  onClose: () => void;
};

export function DialogFooter({ isFormFilled, onClose }: DialogFooterProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        px: 2,
        py: 1.5,
        borderTop: `1px solid ${getBorderColor(theme)}`,
        display: "flex",
        justifyContent: "flex-end",
        gap: 2,
        bgcolor: theme.palette.background.paper,
      }}
    >
      <Button
        variant="outlined"
        onClick={onClose}
        sx={{
          width: 125,
          height: 36,
          borderRadius: "6px",
          textTransform: "none",
          color: isFormFilled
            ? theme.palette.primary.main
            : theme.palette.text.primary,
          borderColor: isFormFilled
            ? theme.palette.primary.main
            : getBorderColor(theme),
          bgcolor: theme.palette.background.paper,
          fontWeight: 700,
          fontSize: 12,
          "&:hover": {
            borderColor: theme.palette.primary.main,
            bgcolor: alpha(theme.palette.primary.main, 0.08),
          },
        }}
      >
        Draft
      </Button>

      <Button
        variant="contained"
        onClick={onClose}
        sx={{
          width: 125,
          height: 36,
          borderRadius: "6px",
          bgcolor: isFormFilled ? theme.palette.primary.main : "#7B828D",
          color: "#fff",
          textTransform: "none",
          fontWeight: 700,
          fontSize: 12,
          boxShadow: "none",
          "&:hover": {
            bgcolor: isFormFilled ? theme.palette.primary.dark : "#6B7280",
            boxShadow: "none",
          },
        }}
      >
        Save
      </Button>
    </Box>
  );
}