"use client";

import React from "react";
import { AnimatedCard } from "@/components/molecules/AnimatedCard/AnimatedCard";
import { Button } from "@/components/atoms/button";
import { ArrowRightIcon } from "@heroicons/react/24/outline";

export function ServiceHeroCard({
  title,
  description,
  icon,
  features,
  href,
  color,
}: {
  title: string;
  description: string;
  icon: React.ReactNode;
  features: string[];
  href: string;
  color: "blue" | "green" | "purple";
}) {
  const colorClasses = {
    blue: {
      iconBg: "bg-blue-100",
      iconText: "text-blue-600",
      border: "border-blue-100",
      hoverBorder: "hover:border-blue-200",
    },
    green: {
      iconBg: "bg-green-100",
      iconText: "text-green-600",
      border: "border-green-100",
      hoverBorder: "hover:border-green-200",
    },
    purple: {
      iconBg: "bg-purple-100",
      iconText: "text-purple-600",
      border: "border-purple-100",
      hoverBorder: "hover:border-purple-200",
    },
  } as const;

  const colors = colorClasses[color];

  return (
    <AnimatedCard
      className={`relative group rounded-2xl overflow-hidden h-full border-2 ${colors.border} ${colors.hoverBorder} transition-all duration-300 hover:shadow-lg hover:-translate-y-1`}
    >
      <div className="p-8 h-full flex flex-col bg-white">
        {/* Icon and Title */}
        <div className="flex items-start gap-4 mb-4">
          <div className={`p-3 rounded-xl ${colors.iconBg} flex-shrink-0`}>
            <div className={colors.iconText}>{icon}</div>
          </div>
          <div>
            <h3 className="text-2xl font-bold text-gray-900">{title}</h3>
          </div>
        </div>

        {/* Description */}
        <p className="text-sm text-gray-600 mb-6 leading-relaxed">{description}</p>

        {/* Features List */}
        <ul className="space-y-2.5 mb-8 flex-grow">
          {features.map((feature, index) => (
            <li key={index} className="flex items-start gap-2.5 text-sm text-gray-700">
              <span className="text-green-600 mt-0.5 flex-shrink-0">✓</span>
              <span>{feature}</span>
            </li>
          ))}
        </ul>

        {/* Action Button */}
        <div className="mt-auto">
          <Button
            as="a"
            href={href}
            className="w-full font-semibold rounded-xl"
            rightIcon={<ArrowRightIcon className="w-4 h-4" />}
          >
            Explore Plans
          </Button>
        </div>
      </div>
    </AnimatedCard>
  );
}
