import { wwwAPI } from "@/Www";
import { getDefaultAvatarID } from "@/Utility";

import scss from "@/AvatarDrawing.module.scss";
import Image from "next/image";

const EDGE_MARGIN = 1.25;
const EDGE_XY = (EDGE_MARGIN - 1.0) / 2;

export default function AvatarDrawing({
  avatarID,
  drawingLength = 48,
  drawingHeight = 48,
}: {
  avatarID: string;
  drawingLength?: number;
  drawingHeight?: number;
}) {
  return (
    <div
      className={scss.drawing}
      style={{
        width: drawingLength * EDGE_MARGIN,
        height: drawingHeight * EDGE_MARGIN,
      }}
    >
      <Image
        alt=""
        src={`${wwwAPI}/drawing?avatarID=${encodeURIComponent(
          getDefaultAvatarID(avatarID),
        )}&drawingVariety=0`}
        className={scss.avatar}
        width={drawingLength}
        height={drawingHeight}
        style={{
          left: drawingLength * EDGE_XY,
          top: drawingHeight * EDGE_XY,
        }}
      />
      <Image
        alt=""
        src={`${wwwAPI}/drawing?avatarID=${encodeURIComponent(
          getDefaultAvatarID(avatarID),
        )}&drawingVariety=2`}
        className={scss.edge}
        width={drawingLength * EDGE_MARGIN}
        height={drawingHeight * EDGE_MARGIN}
        onError={(e) => (e.currentTarget.hidden = true)}
      />
    </div>
  );
}