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

import { AppButton, AppSecondaryButton } from "@/components/ui/button";
import { getFormBorderColor } from "@/components/ui/form";

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 ${getFormBorderColor(theme)}`,
        display: "flex",
        justifyContent: "flex-end",
        gap: 2,
        bgcolor: theme.palette.background.paper,
      }}
    >
      <AppSecondaryButton
        onClick={onClose}
        sx={{
          width: 125,
          minWidth: 125,
          height: 36,
          minHeight: 36,
          color: isFormFilled
            ? theme.palette.primary.main
            : theme.palette.text.primary,
          borderColor: isFormFilled
            ? theme.palette.primary.main
            : getFormBorderColor(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
      </AppSecondaryButton>

      <AppButton
        onClick={onClose}
        sx={{
          width: 125,
          minWidth: 125,
          height: 36,
          minHeight: 36,
          bgcolor: isFormFilled ? theme.palette.primary.main : "#7B828D",
          fontWeight: 700,
          fontSize: 12,
          "&:hover": {
            bgcolor: isFormFilled ? theme.palette.primary.dark : "#6B7280",
          },
        }}
      >
        Save
      </AppButton>
    </Box>
  );
}