"use client";

import type { ReactNode } from "react";

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

function MenuIcon({
  children,
  color,
}: {
  children: ReactNode;
  color?: string;
}) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        width: 18,
        height: 18,
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        color: color ?? theme.palette.text.secondary,
      }}
    >
      <svg
        width="18"
        height="18"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.8"
      >
        {children}
      </svg>
    </Box>
  );
}

export function GearIcon({ color }: { color?: string }) {
  return (
    <MenuIcon color={color}>
      <circle cx="12" cy="12" r="3.2" />
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 1-2 0 1.65 1.65 0 0 0-1-.6 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 1 0-2 1.65 1.65 0 0 0 .6-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-.6 1.65 1.65 0 0 1 2 0 1.65 1.65 0 0 0 1 .6 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c0 .38.22.74.6 1a1.65 1.65 0 0 1 0 2c-.38.26-.6.62-.6 1Z" />
    </MenuIcon>
  );
}

export function BellMenuIcon({ color }: { color?: string }) {
  return (
    <MenuIcon color={color}>
      <path d="M6 8a6 6 0 1 1 12 0c0 7 3 8 3 8H3s3-1 3-8" />
      <path d="M10 20a2 2 0 0 0 4 0" />
    </MenuIcon>
  );
}

export function PeopleIcon({ color }: { color?: string }) {
  return (
    <MenuIcon color={color}>
      <path d="M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
      <circle cx="10" cy="7" r="3" />
      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
      <path d="M16 4.13a4 4 0 0 1 0 7.75" />
    </MenuIcon>
  );
}

export function Download({ color }: { color?: string }) {
  return (
    <MenuIcon color={color}>
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
      <path d="M7 10l5 5 5-5" />
      <path d="M12 15V3" />
    </MenuIcon>
  );
}

export function GlobeMenuIcon({ color }: { color?: string }) {
  return (
    <MenuIcon color={color}>
      <circle cx="12" cy="12" r="9" />
      <path d="M3 12h18" />
      <path d="M12 3a14.5 14.5 0 0 1 0 18" />
      <path d="M12 3a14.5 14.5 0 0 0 0 18" />
    </MenuIcon>
  );
}

export function LogoutIcon({ color }: { color?: string }) {
  return (
    <MenuIcon color={color}>
      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
      <path d="M16 17l5-5-5-5" />
      <path d="M21 12H9" />
    </MenuIcon>
  );
}