"use client";

import { memo } from "react";
import Button from "../../buttons/Button";
import { contentLockupShapePath, getAssetPath } from "../../../../lib/assetUtils";
import type { ContentLockupViewProps } from "./ContentLockup.types";

function ContentLockupView({
  title,
  subtitle,
  description,
  ctaText,
  ctaHref,
  buttonClassName,
  variant,
  linkText,
  linkHref,
  alignment,
  titleId,
  titleContent,
  styles,
}: ContentLockupViewProps) {
  return (
    <div className={styles.container}>
      {variant === "ask" ||
      variant === "ask-inverse" ||
      variant === "modal" ||
      variant === "login" ? (
        /* Simplified structure for ask, modal, and login variants */
        <div
          className={`${styles.titleGroup} ${
            alignment === "left" || variant === "modal" || variant === "login"
              ? "text-left"
              : "text-center"
          }`}
        >
          <div
            className={`${styles.titleContainer} ${
              alignment === "left" || variant === "modal" || variant === "login"
                ? "justify-start"
                : "justify-center"
            }`}
          >
            {title ? (
              <h1 id={titleId} className={styles.title}>
                {title}
              </h1>
            ) : null}
          </div>
          {subtitle ? <h2 className={styles.subtitle}>{subtitle}</h2> : null}
          {(variant === "modal" || variant === "login") && description && (
            <p className={styles.description}>{description}</p>
          )}
        </div>
      ) : (
        /* Full structure for other variants */
        <div className={styles.textContainer}>
          {/* Title and subtitle group */}
          <div className={styles.titleGroup}>
            {/* Title container */}
            <div className={styles.titleContainer}>
              {titleContent ? (
                <h1
                  id={titleId}
                  className={`${styles.title} flex flex-wrap items-center gap-[var(--spacing-scale-010)] xl:gap-[var(--spacing-scale-012)]`}
                >
                  {titleContent}
                </h1>
              ) : title ? (
                <h1 id={titleId} className={styles.title}>
                  {title}
                </h1>
              ) : null}
              {variant === "hero" && (
                <>
                  {/* eslint-disable-next-line @next/next/no-img-element -- decorative shape SVG */}
                  <img
                    src={getAssetPath(contentLockupShapePath())}
                    alt=""
                    className={styles.shape}
                    role="presentation"
                  />
                </>
              )}
            </div>

            {/* Subtitle */}
            {subtitle ? <h2 className={styles.subtitle}>{subtitle}</h2> : null}
          </div>

          {/* Description */}
          {description && <p className={styles.description}>{description}</p>}
        </div>
      )}

      {/* Link for feature variant */}
      {variant === "feature" && linkText && linkHref && (
        <a
          href={linkHref}
          className="text-medium-underline underline text-[var(--color-content-default-primary)] hover:text-[var(--color-content-default-secondary)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-secondary)] rounded-sm px-1 py-0.5"
        >
          {linkText}
        </a>
      )}

      {/* CTA Button */}
      {ctaText && (
        <div className="flex justify-start">
          {/* Small button for xsm and sm breakpoints */}
          <div className="block md:hidden">
            <Button
              buttonType="filled"
              palette={variant === "hero" ? "default" : "inverse"}
              size="small"
              href={ctaHref}
            >
              {ctaText}
            </Button>
          </div>
          {/* Large button for md and lg breakpoints */}
          <div className="hidden md:block xl:hidden">
            <Button
              buttonType="filled"
              palette={variant === "hero" ? "default" : "inverse"}
              size="large"
              className={buttonClassName}
              href={ctaHref}
            >
              {ctaText}
            </Button>
          </div>
          {/* XLarge button for xl breakpoint */}
          <div className="hidden xl:block">
            <Button
              buttonType="filled"
              palette={variant === "hero" ? "default" : "inverse"}
              size="xlarge"
              href={ctaHref}
            >
              {ctaText}
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}

ContentLockupView.displayName = "ContentLockupView";

export default memo(ContentLockupView);
