import { Button, Group } from "@mantine/core";
import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
import { useState } from "react";
import DevicePreviewModal from "./addNotification/devicePreviewModal";
import { type NotificationFormType } from "./addNotification/types";

const StepperNavigation: React.FC<{
  activeStep: number;
  setActiveStep: React.Dispatch<React.SetStateAction<number>>;
  notificationData?: NotificationFormType;
}> = ({ activeStep, setActiveStep, notificationData }) => {
  const [opened, setOpened] = useState(false);
  const prevStep = () =>
    setActiveStep((current) => (current > 0 ? current - 1 : current));

  return (
    <>
      {notificationData && (
        <DevicePreviewModal
          opened={opened}
          onClose={() => setOpened(false)}
          data={notificationData}
        />
      )}
      <Group justify="end">
        {activeStep > 0 && (
          <Button
            variant="default"
            onClick={prevStep}
            justify="space-between"
            leftSection={<IconChevronLeft height={16} width={16} />}
          >
            Back
          </Button>
        )}
        <Button
          justify="space-between"
          rightSection={<IconChevronRight height={16} width={16} />}
          type="submit"
        >
          {activeStep === 3 ? "Send" : "Next"}
        </Button>
      </Group>
    </>
  );
};

export default StepperNavigation;