import { Box, Typography, IconButton } from "@mui/material";
import { Close } from "@mui/icons-material";
import { useMapData } from "./MapDataContext";

export function SightInfoWidget() {
  const { selectedSight, setSelectedSight } = useMapData();

  if (!selectedSight) {
    return null;
  }

  return (
    <Box
      sx={{
        position: "absolute",
        bottom: 16,
        left: "50%",
        transform: "translateX(-50%)",
        backgroundColor: "rgba(0, 0, 0, 0.9)",
        color: "white",
        padding: "12px 16px",
        borderRadius: "4px",
        minWidth: 250,
        maxWidth: 400,
        backdropFilter: "blur(10px)",
        border: "1px solid rgba(255, 255, 255, 0.2)",
        zIndex: 1000,
        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
      }}
    >
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-start",
          mb: 1,
        }}
      >
        <Typography variant="h6" sx={{ fontWeight: "bold", color: "#fff" }}>
          {selectedSight.name}
        </Typography>
        <IconButton
          size="small"
          onClick={() => setSelectedSight(undefined)}
          sx={{ color: "#fff", p: 0, minWidth: 24, width: 24, height: 24 }}
        >
          <Close fontSize="small" />
        </IconButton>
      </Box>

      <Typography variant="body2" sx={{ color: "#ccc", mb: 1 }}>
        {selectedSight.address}
      </Typography>

      <Typography variant="caption" sx={{ color: "#999" }}>
        Город: {selectedSight.city}
      </Typography>
    </Box>
  );
}