import React from "react";
import type { AboutData } from "../types";

interface AboutSectionProps {
  data: AboutData;
  variant?: "dark" | "light";
  titleOverride?: string;
  contentOverride?: string;
}

export function AboutSection({
  data,
  variant = "dark",
  titleOverride,
  contentOverride,
}: AboutSectionProps) {
  const isLight = variant === "light";
  const sectionClasses = isLight
    ? "py-16 md:py-20 bg-[#f6f8fc]"
    : "py-10 md:py-14 border-t border-[rgba(255,255,255,0.02)]";

  const titleClasses = isLight
    ? "text-3xl md:text-[34px] mb-6 font-semibold text-[#0f1f39]"
    : "text-lg md:text-xl mb-4 md:mb-[18px] text-white";

  const paragraphClasses = isLight
    ? "text-base leading-relaxed text-[#4b5565] md:text-lg"
    : "text-huilong-muted leading-relaxed";

  const cardClasses = isLight
    ? "bg-white border border-[#dfe4ee] text-left shadow-[0_16px_32px_rgba(15,31,57,0.06)]"
    : "bg-huilong-card border border-[rgba(255,255,255,0.03)]";

  const cardTitleClasses = isLight ? "text-[#0f1f39]" : "text-white";
  const cardContentClasses = isLight
    ? "text-sm text-[#4b5565] leading-relaxed"
    : "text-huilong-muted text-sm";

  const title = titleOverride ?? data.title;
  const content = contentOverride ?? data.content;

  return (
    <section id="about" className={sectionClasses}>
      <div className="mx-auto flex w-full max-w-[1200px] flex-col gap-8 px-4 md:px-6 lg:flex-row lg:items-start lg:gap-10">
        <div className="flex-1">
          <h2 className={titleClasses}>{title}</h2>
          <p className={paragraphClasses}>{content}</p>
        </div>
        <div className="grid w-full max-w-[420px] grid-cols-1 gap-3 self-stretch lg:ml-auto">
          {data.cards.map((card, idx) => (
            <div key={idx} className={`rounded-2xl p-5 ${cardClasses}`}>
              <h3 className={`mb-2 text-base font-semibold ${cardTitleClasses}`}>
                {card.title}
              </h3>
              <p className={cardContentClasses}>{card.content}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}