import { IconButton, Tooltip } from "@mui/material";
import { Contrast } from "lucide-react";

interface PreviewBackgroundToggleProps {
  dark: boolean;
  onToggle: () => void;
}

export const PreviewBackgroundToggle = ({
  dark,
  onToggle,
}: PreviewBackgroundToggleProps) => (
  <Tooltip title={dark ? "Сделать фон белым" : "Сделать фон чёрным"}>
    <IconButton
      size="small"
      aria-label={dark ? "Сделать фон белым" : "Сделать фон чёрным"}
      onClick={(event) => {
        event.stopPropagation();
        onToggle();
      }}
      sx={{
        position: "absolute",
        top: 8,
        left: 8,
        zIndex: 2,
        color: dark ? "#fff" : "#000",
        backgroundColor: dark
          ? "rgba(255, 255, 255, 0.16)"
          : "rgba(255, 255, 255, 0.8)",
        "&:hover": {
          backgroundColor: dark
            ? "rgba(255, 255, 255, 0.28)"
            : "rgba(255, 255, 255, 1)",
        },
      }}
    >
      <Contrast size={18} />
    </IconButton>
  </Tooltip>
);