import React, { forwardRef } from "react";
import { FeaturesSectionProps } from "../../types";
import { Card, CardContent } from "../ui/Card";

export const FeaturesSection = forwardRef<HTMLElement, FeaturesSectionProps>(
  (
    {
      className = "",
      features = [
        {
          title: "Easy to Use",
          description:
            "Simple and intuitive components that work out of the box",
        },
        {
          title: "TypeScript Support",
          description:
            "Full TypeScript support with comprehensive type definitions",
        },
        {
          title: "Customizable",
          description: "Flexible styling options to match your design system",
        },
      ],
      children,
      ...props
    },
    ref
  ) => {
    return (
      <section
        ref={ref}
        className={`py-16 px-4 sm:px-6 lg:px-8 ${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">
              Features
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Discover what makes our component library the perfect choice for
              your next project
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {features.map((feature, index) => (
              <Card key={index} className="h-full">
                <CardContent className="p-6">
                  {feature.icon && (
                    <div className="mb-4 flex justify-center">
                      {feature.icon}
                    </div>
                  )}
                  <h3 className="text-xl font-semibold text-foreground mb-3">
                    {feature.title}
                  </h3>
                  <p className="text-muted-foreground">{feature.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>

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

FeaturesSection.displayName = "FeaturesSection";