import React, { useEffect } from "react";
import { Typography, Box, Badge, useTheme } from "@mui/material";
import { styled } from "@mui/system";
import { Grid } from "../grid/Grid";
import { motion } from "framer-motion";
import { useDispatch } from "react-redux";
import {
  SET_MEDIATOR_TEXT,
  SET_SUBMENU_TEXT,
} from "../../lib/redux/slices/userSlice";
import { useLocation } from "react-router-dom";

const CircleWrapper = styled(motion.div)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  flexDirection: "column",
  gap: "10px",
  width: window.innerWidth <= 600 ? "40vw" : "180px",
  height: window.innerWidth <= 600 ? "40vw" : "180px",
  borderRadius: "16px",
  background: theme.palette.mode === "dark" ? "#1e272e" : "#ffffff",
  borderStyle: "solid",
  borderWidth: "1px",
  borderColor: theme.palette.primary.main,
  boxShadow:
    theme.palette.mode === "dark"
      ? "5px 5px 15px rgba(0, 0, 0, 0.5)"
      : "5px 5px 15px rgba(0, 0, 0, 0.1)",
  transition: "transform 0.2s ease, background 0.4s ease",
  "&:hover": {
    transform: "translateY(-10px)",
    background: theme.palette.mode === "dark" ? "#2f3640" : "#f5f6fa",
  },
  padding: 2,
}));

const LinkItem = ({ icon, title, badgeContent, ...props }) => {
  const theme = useTheme();
  const dispatch = useDispatch();

  const { pathname } = useLocation();

  useEffect(() => {
    dispatch(SET_MEDIATOR_TEXT(pathname));
  }, [dispatch]);

  return (
    <Grid
      onClick={() => {
        dispatch(SET_SUBMENU_TEXT(title));
      }}
    >
      <CircleWrapper
        {...props}
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.6 }}
        theme={theme}
      >
        <Badge badgeContent={badgeContent} color="primary">
          <Box sx={{ fontSize: "20px", color: "#00a8ff" }}>{icon}</Box>
        </Badge>
        <Typography
          sx={{
            fontSize: "14px",
            fontWeight: 600,
            textAlign: "center",
            color: theme.palette.mode === "dark" ? "#f5f6fa" : "#2f3640",
          }}
        >
          {title}
        </Typography>
      </CircleWrapper>
    </Grid>
  );
};

export default LinkItem;
