"use client";

import { memo } from "react";
import Button from "../../buttons/Button";
import { useMessages } from "../../../contexts/MessagesContext";
import { WORKSHOP_SIGNUP_ANCHOR_ID } from "../../../../lib/workshopSignup";

const DOT_CLASS: Record<string, string> = {
  teal: "bg-[var(--color-content-invert-brand-teal)]",
  lime: "bg-[var(--color-surface-invert-brand-kiwi)]",
  lavender: "bg-[var(--color-content-invert-brand-lavender)]",
  red: "bg-[var(--color-content-invert-brand-red)]",
};

function WorkshopOverviewView({ className = "" }: { className?: string }) {
  const copy = useMessages().pages.workshops.overview;

  return (
    <section
      data-figma-node="24263-45235"
      className={`bg-[var(--color-surface-default-primary)] px-[var(--space-400)] py-[var(--space-1800)] md:px-[var(--space-1200)] lg:px-[112px] lg:py-[120px] ${className}`}
    >
      <div className="mx-auto flex w-full max-w-[1216px] flex-col items-center gap-12">
        <div className="flex max-w-[640px] flex-col items-center gap-2 text-center">
          <h2 className="x-large-heading text-[var(--color-content-default-primary)]">
            {copy.title}
          </h2>
          <p className="medium-paragraph text-[var(--color-content-default-tertiary)]">
            {copy.body}
          </p>
        </div>
        <ul className="grid w-full max-w-[800px] grid-cols-2 gap-4 md:gap-6">
          {copy.rooms.map((room) => (
            <li
              key={room.id}
              className="flex min-h-[100px] items-center gap-4 rounded-[12px] border border-[var(--color-border-default-secondary)] bg-[var(--color-surface-default-secondary)] p-6"
            >
              <span
                className={`size-3 shrink-0 rounded-full ${DOT_CLASS[room.color] ?? ""}`}
                aria-hidden
              />
              <span className="text-[18px] font-medium leading-6 text-[var(--color-content-default-primary)]">
                {room.label}
              </span>
            </li>
          ))}
        </ul>
        <Button href={`#${WORKSHOP_SIGNUP_ANCHOR_ID}`} size="small">
          {copy.button}
        </Button>
      </div>
    </section>
  );
}

export default memo(WorkshopOverviewView);