"use client";

import { memo } from "react";
import SectionNumber from "./SectionNumber";

interface NumberCardProps {
  number: number;
  text: string;
  size?: "Small" | "Medium" | "Large" | "XLarge";
  iconShape?: string;
  iconColor?: string;
}

const NumberCard = memo<NumberCardProps>(({ number, text, size }) => {
  // Base classes common to all sizes
  const baseClasses = "bg-[var(--color-surface-inverse-primary)] rounded-[12px] shadow-lg";

  // If size prop is provided, use explicit size classes
  // Otherwise, use responsive breakpoints for backward compatibility
  if (size) {
    // Size-specific classes
    const sizeClasses = {
      Small: "flex flex-col items-end justify-center gap-4 p-5 relative",
      Medium: "flex flex-row items-center gap-8 p-8 relative",
      Large: "flex flex-col items-start justify-end gap-[22px] h-[238px] p-8 relative",
      XLarge: "flex flex-col items-start justify-end gap-[22px] h-[238px] p-8 relative",
    };

    // Text size classes
    const textClasses = {
      Small: "font-bricolage-grotesque font-medium text-[24px] leading-[32px] text-[#141414]",
      Medium: "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
      Large: "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
      XLarge: "font-bricolage-grotesque font-medium text-[32px] leading-[32px] text-[#141414]",
    };

    // Section number positioning classes
    const sectionNumberClasses = {
      Small: "flex justify-end items-end",
      Medium: "flex justify-start flex-shrink-0",
      Large: "absolute top-8 right-8",
      XLarge: "absolute top-8 right-8",
    };

    // Content container classes
    const contentClasses = {
      Small: "",
      Medium: "flex-1",
      Large: "absolute bottom-8 left-8 right-16",
      XLarge: "absolute bottom-8 left-8 right-16",
    };

    return (
      <div className={`${baseClasses} ${sizeClasses[size]}`}>
        {/* Section Number */}
        <div className={sectionNumberClasses[size]}>
          <SectionNumber number={number} />
        </div>

        {/* Card Content */}
        <div className={contentClasses[size]}>
          <p className={textClasses[size]}>
            {text}
          </p>
        </div>
      </div>
    );
  }

  // Responsive breakpoints for backward compatibility (matches original behavior)
  // Maps to: Small (mobile) -> Medium (sm) -> Large (lg) -> XLarge (xl)
  return (
    <div className={`${baseClasses} flex flex-col gap-4 p-5 sm:flex-row sm:gap-8 sm:p-8 sm:items-center lg:flex-col lg:gap-[22px] lg:items-start lg:justify-end lg:p-8 lg:relative lg:h-[238px]`}>
      {/* Section Number - Responsive positioning */}
      <div className="flex justify-end items-end sm:justify-start sm:flex-shrink-0 lg:absolute lg:top-8 lg:right-8">
        <SectionNumber number={number} />
      </div>

      {/* Card Content - Responsive positioning */}
      <div className="sm:flex-1 lg:absolute lg:bottom-8 lg:left-8 lg:right-16">
        <p className="font-bricolage-grotesque font-medium text-[24px] leading-[32px] sm:leading-[24px] sm:text-[24px] lg:text-[24px] lg:leading-[24px] xl:text-[32px] xl:leading-[32px] text-[#141414]">
          {text}
        </p>
      </div>
    </div>
  );
});

NumberCard.displayName = "NumberCard";

export default NumberCard;