"use client";

import { AnimatePresence, motion } from "framer-motion";
import React, { useState } from "react";
import {
  FaCog,
  FaDollarSign,
  FaPalette,
  FaRocket,
  FaShieldAlt,
  FaUsers,
} from "react-icons/fa";

import { cn } from "@/lib/utils";

interface Feature278Props {
  className?: string;
}

const Feature278 = ({ className }: Feature278Props) => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

  const items = [
    {
      title: "Fast Performance",
      description: "Lightning quick loading times and smooth interactions",
      icon: FaRocket,
      color: "text-primary",
      bgColor: "bg-primary/10",
    },
    {
      title: "Easy Setup",
      description: "Simple configuration with minimal code required",
      icon: FaCog,
      color: "text-secondary",
      bgColor: "bg-secondary/10",
    },
    {
      title: "Beautiful Design",
      description: "Modern aesthetics with stunning visual appeal",
      icon: FaPalette,
      color: "text-primary",
      bgColor: "bg-primary/10",
    },
    {
      title: "Great Value",
      description: "Affordable pricing with premium features included",
      icon: FaDollarSign,
      color: "text-secondary",
      bgColor: "bg-secondary/10",
    },
    {
      title: "Secure",
      description: "Enterprise-grade security with data protection",
      icon: FaShieldAlt,
      color: "text-primary",
      bgColor: "bg-primary/10",
    },
    {
      title: "Team Support",
      description: "Dedicated support team available around the clock",
      icon: FaUsers,
      color: "text-secondary",
      bgColor: "bg-secondary/10",
    },
  ];

  return (
    <section
      className={cn("min-h-screen overflow-hidden bg-muted py-32", className)}
    >
      <div className="container flex w-full flex-col items-center justify-center px-4">
        <div className="max-w-5xl">
          <h2 className="relative z-20 py-2 text-center font-sans text-5xl font-semibold tracking-tighter md:py-7">
            Features That speak for <br className="hidden lg:block" />{" "}
            <span className="opacity-50">Themselves</span>
          </h2>

          <div className="relative grid w-full max-w-3xl grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
            {items.map((item, idx) => (
              <div
                key={idx}
                className="group relative block h-full w-full p-2"
                onMouseEnter={() => setHoveredIndex(idx)}
                onMouseLeave={() => setHoveredIndex(null)}
              >
                <AnimatePresence mode="wait" initial={false}>
                  {hoveredIndex === idx && (
                    <motion.span
                      className={cn(
                        "absolute inset-0 block h-full w-full rounded-2xl",
                        item.bgColor,
                      )}
                      layoutId="hoverBackground"
                      key={idx}
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      transition={{ duration: 0.3 }}
                    />
                  )}
                </AnimatePresence>

                <Card
                  title={item.title}
                  description={item.description}
                  icon={item.icon}
                  color={item.color}
                  bgColor={item.bgColor}
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature278 };

const Card = ({
  className,
  title,
  description,
  bgColor,
  icon: Icon,
  color,
}: {
  className?: string;
  title: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
  bgColor: string;
  color: string;
}) => {
  return (
    <div
      className={cn(
        "relative z-20 flex h-full flex-col items-start justify-start gap-2 rounded-3xl bg-background p-5",
        className,
      )}
    >
      <div
        className={cn(
          "mb-12 flex size-15 items-center justify-center rounded-2xl bg-background",
          color,
          bgColor,
        )}
      >
        <Icon className="size-5" />
      </div>
      <h1 className="text-xl font-medium tracking-tight">{title}</h1>
      <p className="text-sm text-muted-foreground/50">{description}</p>
    </div>
  );
};