import { ImagePlus, Unlink } from "lucide-react";

import { Trash2 } from "lucide-react";
import { Box, TextField } from "@mui/material";
import { ReactMarkdownEditor } from "@widgets";

export const SightEdit = () => {
  return (
    <div className="flex  gap-3">
      <div className="flex flex-1 flex-col gap-3">
        <div className="flex items-center gap-2 justify-end">
          <button className="flex items-center gap-2 border border-gray-300 bg-blue-100 rounded-md px-2 py-1">
            Открепить
            <Unlink />
          </button>
          <button className="flex items-center gap-2 border border-gray-300 bg-red-100 rounded-md px-2 py-1">
            Удалить
            <Trash2 />
          </button>
        </div>

        <TextField label="Заголовок" />
        <ReactMarkdownEditor />
      </div>

      <div className="flex flex-col gap-3 w-[350px]">
        <p className="mb-4">Превью</p>
        <Box
          className="rounded-2xl overflow-hidden"
          sx={{
            width: "100%",
            minHeight: 500,

            background: "#877361",
            borderColor: "grey.300",
          }}
        >
          {!false && (
            <Box
              sx={{
                width: "100%",
                height: 200,

                backgroundColor: "grey.300",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <ImagePlus size={48} color="grey" />
            </Box>
          )}
          <Box
            sx={{
              width: "100%",
              background: "#877361",
              borderColor: "grey.300",
            }}
          >
            <Box
              sx={{
                width: "100%",
                height: 40,

                backgroundColor: "#a39487",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            ></Box>
          </Box>
        </Box>
      </div>
    </div>
  );
};
