"use client";

import React from "react";

interface Button {
  text: string;
  href: string;
}

interface TextImageAboutProps {
  title: string;
  description: string[];
  buttons: Button[];
  buttonAnimation?: "slide-up" | "fade-in" | "none";
  useInvertedBackground?: boolean;
  imageSrc: string;
  imageAlt: string;
}

export function TextImageAbout({
  title,
  description,
  buttons,
  buttonAnimation = "slide-up",
  useInvertedBackground = false,
  imageSrc,
  imageAlt,
}: TextImageAboutProps) {
  const bgClass = useInvertedBackground ? "bg-gray-900" : "bg-white";
  const textClass = useInvertedBackground ? "text-white" : "text-gray-900";
  const descTextClass = useInvertedBackground ? "text-gray-300" : "text-gray-600";

  const getButtonAnimationClass = () => {
    switch (buttonAnimation) {
      case "slide-up":
        return "animate-slide-up";
      case "fade-in":
        return "animate-fade-in";
      default:
        return "";
    }
  };

  return (
    <section className={`${bgClass} py-16 md:py-24 lg:py-32 transition-colors duration-300`}>
      <div className="container mx-auto px-4 md:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
          {/* Text Content */}
          <div className="flex flex-col justify-center space-y-6">
            <div>
              <h2 className={`text-4xl md:text-5xl font-bold ${textClass} mb-6 leading-tight`}>
                {title}
              </h2>
              <div className="space-y-4">
                {description.map((paragraph, index) => (
                  <p
                    key={index}
                    className={`text-lg ${descTextClass} leading-relaxed`}
                  >
                    {paragraph}
                  </p>
                ))}
              </div>
            </div>

            {/* Buttons */}
            <div className="flex flex-wrap gap-4 pt-4">
              {buttons.map((button, index) => (
                <a
                  key={index}
                  href={button.href}
                  className={`inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 ${
                    index === 0
                      ? "bg-blue-600 text-white hover:bg-blue-700 shadow-lg hover:shadow-xl"
                      : "border-2 border-blue-600 text-blue-600 hover:bg-blue-50"
                  } ${getButtonAnimationClass()}`}
                  style={{
                    animationDelay: `${index * 100}ms`,
                  }}
                >
                  {button.text}
                </a>
              ))}
            </div>
          </div>

          {/* Image */}
          <div className="flex justify-center lg:justify-end">
            <div className="relative w-full max-w-md lg:max-w-lg">
              <div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl transform rotate-3 opacity-20"></div>
              <img
                src={imageSrc}
                alt={imageAlt}
                className="relative w-full h-auto rounded-2xl shadow-2xl object-cover"
              />
            </div>
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes slide-up {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes fade-in {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }

        .animate-slide-up {
          animation: slide-up 0.6s ease-out forwards;
          opacity: 0;
        }

        .animate-fade-in {
          animation: fade-in 0.6s ease-out forwards;
          opacity: 0;
        }
      `}</style>
    </section>
  );
}