import Box from "@mui/material/Box";

import type { NotificationIconName } from "../types/notification-setting-types";

type NotificationSettingIconProps = {
  name: NotificationIconName;
  size?: number;
  title?: string;
};

export function NotificationSettingIcon({
  name,
  size = 20,
  title,
}: NotificationSettingIconProps) {
  function renderIcon() {
    switch (name) {
      case "bell":
        return (
          <>
            <path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9" />
            <path d="M13.7 21a2 2 0 0 1-3.4 0" />
          </>
        );

      case "gmail":
        return (
          <>
            <rect
              x="3"
              y="5"
              width="18"
              height="14"
              rx="2"
            />
            <path d="m4 7 8 6 8-6" />
          </>
        );

      case "badge":
        return (
          <>
            <circle cx="12" cy="12" r="8" />
            <circle cx="12" cy="12" r="3" />
            <path d="M12 2v2" />
            <path d="M12 20v2" />
            <path d="M2 12h2" />
            <path d="M20 12h2" />
          </>
        );

      case "save":
        return (
          <>
            <path d="M5 3h12l2 2v16H5z" />
            <path d="M8 3v6h8V3" />
            <path d="M8 21v-7h8v7" />
          </>
        );

      default:
        return null;
    }
  }

  return (
    <Box
      component="svg"
      viewBox="0 0 24 24"
      role={title ? "img" : undefined}
      aria-hidden={title ? undefined : true}
      aria-label={title}
      sx={{
        width: size,
        height: size,
        display: "block",
        flexShrink: 0,
        fill: "none",
        stroke: "currentColor",
        strokeWidth: 1.8,
        strokeLinecap: "round",
        strokeLinejoin: "round",
      }}
    >
      {title ? <title>{title}</title> : null}
      {renderIcon()}
    </Box>
  );
}