"use client";

import { memo } from "react";
import Button from "../../buttons/Button";
import Link from "../../navigation/Link";
import type { YourTurnViewProps } from "./YourTurn.types";

const COLOR_BARS = [
  "bg-[var(--color-lavender-lavender200)]",
  "bg-[var(--color-surface-invert-brand-teal)]",
  "bg-[var(--color-surface-invert-brand-secondary)]",
  "bg-[var(--color-surface-invert-brand-red)]",
] as const;

function YourTurnView({
  heading,
  body,
  createRule,
  facilitator,
  facilitatorHref,
  questionsLead,
  faq,
  faqHref,
  or,
  askOrganizer,
  illustrationCaption,
  onCreateRule,
  onAskOrganizer,
}: YourTurnViewProps) {
  return (
    <section
      data-figma-node="24239:1397"
      className="border-b border-[var(--color-border-default-secondary)] bg-[var(--color-surface-default-tertiary)] px-[var(--space-600)] py-12 lg:px-[var(--space-2400)] lg:py-[var(--space-3000)]"
      aria-labelledby="about-your-turn-heading"
    >
      <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-10 lg:flex-row lg:items-start lg:gap-12">
        <div className="flex w-full flex-col gap-8 lg:max-w-[472px] lg:shrink-0 lg:gap-12">
          <div className="flex flex-col gap-5 lg:gap-6">
            <div className="flex h-1 w-[184px] gap-1.5 lg:h-3 lg:w-[400px]" aria-hidden>
              {COLOR_BARS.map((bar) => (
                <span key={bar} className={`h-full flex-1 rounded-sm ${bar}`} />
              ))}
            </div>
            <h2
              id="about-your-turn-heading"
              className="font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)]"
            >
              {heading}
            </h2>
            <p className="font-inter text-paragraph-m text-[var(--color-content-default-secondary)]">
              {body}
            </p>
          </div>
          <div className="flex flex-col gap-3 md:flex-row md:gap-4">
            <Button
              buttonType="filled"
              palette="default"
              size="large"
              className="w-full justify-center md:w-auto"
              onClick={onCreateRule}
            >
              {createRule}
            </Button>
            <Button
              buttonType="outline"
              palette="default"
              size="large"
              className="w-full justify-center md:w-auto"
              href={facilitatorHref}
            >
              {facilitator}
            </Button>
          </div>
          <p className="font-inter text-paragraph-s text-[var(--color-content-default-secondary)]">
            {questionsLead}{" "}
            <Link href={faqHref} variant="paragraph" theme="dark" type="primary">
              {faq}
            </Link>{" "}
            {or}{" "}
            <Link
              variant="paragraph"
              theme="dark"
              type="primary"
              onClick={onAskOrganizer}
            >
              {askOrganizer}
            </Link>
          </p>
        </div>
        <div className="flex h-[246px] w-full flex-col items-start justify-end rounded-[var(--radius-300)] border border-dashed border-[var(--color-border-default-tertiary)] bg-[var(--color-surface-default-secondary)] p-6 lg:h-[340px] lg:flex-1">
          <p className="font-inter text-paragraph-xxs text-[var(--color-content-default-tertiary)]">
            {illustrationCaption}
          </p>
        </div>
      </div>
    </section>
  );
}

YourTurnView.displayName = "YourTurnView";

export default memo(YourTurnView);