"use client";

/**
 * Figma: "Sections / SectionNumber" (see registry)
 */

import { memo } from "react";
import { getAssetPath, sectionNumberPath } from "../../../lib/assetUtils";

interface SectionNumberProps {
  number: number;
}

const SectionNumber = memo<SectionNumberProps>(({ number }) => {
  const getImageSrc = (num: number): string => {
    const n = num === 2 || num === 3 ? num : 1;
    return getAssetPath(sectionNumberPath(n));
  };

  return (
    <div className="relative size-[40px] overflow-visible -rotate-[15deg]">
      {/* eslint-disable-next-line @next/next/no-img-element -- dynamic src from getImageSrc */}
      <img
        src={getImageSrc(number)}
        alt={`Section ${number}`}
        className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 size-[47.37px] max-w-none"
      />
      <div className="absolute inset-0 flex items-center justify-center">
        <span className="text-[var(--font-size-body-small)] font-[var(--font-weight-bold)] text-[var(--color-content-inverse-primary)]">
          {number}
        </span>
      </div>
    </div>
  );
});

SectionNumber.displayName = "SectionNumber";

export default SectionNumber;