"use client";

import { memo } from "react";
import { getAssetPath } from "../../../../lib/assetUtils";
import type { ParticipantSelectionViewProps } from "./ParticipantSelection.types";

function ParticipantArt() {
  return (
    <div
      className="relative mx-auto aspect-[540/555] w-full max-w-[420px] pr-12 lg:mx-0 lg:w-[540px] lg:max-w-none lg:shrink-0 lg:pr-0"
      aria-hidden
    >
      {/* eslint-disable @next/next/no-img-element -- decorative Figma shapes */}
      <img
        src={getAssetPath("assets/shapes/about-participant-circles.svg")}
        alt=""
        width={282}
        height={282}
        className="absolute top-0 left-0 h-auto w-[52.2%]"
      />
      <img
        src={getAssetPath("assets/shapes/about-participant-rings.svg")}
        alt=""
        width={334}
        height={334}
        className="absolute top-[6.3%] left-[38.15%] h-auto w-[61.85%]"
      />
      <img
        src={getAssetPath("assets/shapes/about-participant-clover.svg")}
        alt=""
        width={200}
        height={200}
        className="absolute top-[57.4%] left-[25.7%] h-auto w-[37%] rotate-[60deg]"
      />
      {/* eslint-enable @next/next/no-img-element */}
    </div>
  );
}

function ParticipantSelectionView({
  heading,
  body,
  groups,
  footnote,
}: ParticipantSelectionViewProps) {
  return (
    <section
      data-figma-node="24227:30762"
      className="flex flex-col gap-4 border-b border-[var(--color-border-default-secondary)] bg-black px-[var(--space-400)] py-20 lg:flex-row lg:items-center lg:justify-center lg:gap-8 lg:px-[var(--space-2400)]"
      aria-labelledby="about-participant-heading"
    >
      <ParticipantArt />
      <div className="flex w-full min-w-0 flex-col gap-12 lg:max-w-[928px] lg:flex-1">
        <div className="flex flex-col gap-4">
          <h2
            id="about-participant-heading"
            className="font-bricolage-grotesque text-display-s text-[var(--color-content-default-primary)] lg:text-heading-xxl"
          >
            {heading}
          </h2>
          <p className="font-inter text-paragraph-s text-[var(--color-content-default-tertiary)] lg:text-paragraph-l">
            {body}
          </p>
        </div>
        <div>
          <ul className="m-0 list-none p-0">
            {groups.map((group, index) => (
              <li
                key={group}
                className={`border-b border-[var(--color-border-default-secondary)] py-4 font-inter text-paragraph-xs text-[var(--color-content-default-primary)] lg:text-paragraph-m ${
                  index === 0 ? "border-t" : ""
                }`}
              >
                {group}
              </li>
            ))}
          </ul>
          <p className="pt-6 font-inter text-paragraph-xxs text-[var(--color-content-default-tertiary)] lg:text-paragraph-s">
            {footnote}
          </p>
        </div>
      </div>
    </section>
  );
}

ParticipantSelectionView.displayName = "ParticipantSelectionView";

export default memo(ParticipantSelectionView);