import React, { forwardRef } from "react";
import { ProblemSectionProps } from "../../types";

export const ProblemSection = forwardRef<HTMLElement, ProblemSectionProps>(
  (
    {
      className = "",
      title = "Common Problems We Solve",
      subtitle = "Identify the challenges that our solution addresses",
      problems = [
        {
          title: "Complex Setup",
          description:
            "Setting up authentication and UI components from scratch takes too much time.",
        },
        {
          title: "Poor User Experience",
          description:
            "Inconsistent design patterns lead to confusing user interfaces.",
        },
        {
          title: "Security Concerns",
          description:
            "Implementing secure authentication without proper expertise is risky.",
        },
      ],
      variant = "grid",
      children,
      ...props
    },
    ref
  ) => {
    return (
      <section
        ref={ref}
        className={`py-16 px-4 sm:px-6 lg:px-8 bg-muted/30 ${className}`}
        {...props}
      >
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
              {title}
            </h2>
            {subtitle && (
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                {subtitle}
              </p>
            )}
          </div>

          <div
            className={
              variant === "grid"
                ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
                : "space-y-8 max-w-3xl mx-auto"
            }
          >
            {problems.map((problem, index) => (
              <div
                key={index}
                className={`${
                  variant === "list"
                    ? "flex items-start space-x-4"
                    : "text-center"
                }`}
              >
                {problem.icon && (
                  <div
                    className={`${
                      variant === "list"
                        ? "flex-shrink-0 w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center text-destructive"
                        : "mb-4 flex justify-center"
                    }`}
                  >
                    {problem.icon}
                  </div>
                )}

                <div className={variant === "list" ? "flex-1" : ""}>
                  <h3
                    className={`text-xl font-semibold text-foreground mb-3 ${
                      variant === "list" ? "text-left" : ""
                    }`}
                  >
                    {problem.title}
                  </h3>
                  <p
                    className={`text-muted-foreground ${
                      variant === "list" ? "text-left" : ""
                    }`}
                  >
                    {problem.description}
                  </p>
                </div>
              </div>
            ))}
          </div>

          {children}
        </div>
      </section>
    );
  }
);

ProblemSection.displayName = "ProblemSection";