"use client";

import type { MouseEvent } from "react";

import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import { alpha, useTheme } from "@mui/material/styles";

import { DashboardAssetIcon } from "@/components/dashboard/dashboard-asset-icon";

type HeaderActionIconProps = {
  src: string;
  showAlert?: boolean;
  onClick?: (event: MouseEvent<HTMLElement>) => void;
};

export function HeaderActionIcon({
  src,
  showAlert,
  onClick,
}: HeaderActionIconProps) {
  const theme = useTheme();

  return (
    <Box sx={{ position: "relative", width: 40, height: 40 }}>
      <IconButton
        onClick={onClick}
        sx={{
          width: 40,
          height: 40,
          borderRadius: "8px",
          color: theme.palette.text.secondary,
          backgroundColor:
            theme.palette.mode === "dark"
              ? alpha(theme.palette.common.white, 0.03)
              : "transparent",
          border:
            theme.palette.mode === "dark"
              ? `1px solid ${alpha(theme.palette.common.white, 0.08)}`
              : "1px solid transparent",
          "&:hover": {
            backgroundColor: theme.palette.action.hover,
          },
        }}
      >
        <DashboardAssetIcon
          src={src}
          size={16}
          sx={{
            filter:
              theme.palette.mode === "dark"
                ? "brightness(0) invert(1)"
                : "none",
            opacity: theme.palette.mode === "dark" ? 0.9 : 1,
          }}
        />
      </IconButton>

      {showAlert ? (
        <Box
          sx={{
            position: "absolute",
            top: 4,
            right: 4,
            width: 8,
            height: 8,
            borderRadius: "50%",
            backgroundColor: "#f04438",
            "&::before": {
              content: '""',
              position: "absolute",
              top: -2.84,
              left: -2.84,
              width: 13.68,
              height: 13.68,
              borderRadius: "50%",
              backgroundColor: alpha("#f04438", 0.22),
            },
          }}
        />
      ) : null}
    </Box>
  );
}