"use client";

import React from "react";
import { AnimatedCard } from "@/components/molecules/AnimatedCard/AnimatedCard";
import { Button } from "@/components/atoms/button";
import { ArrowRight, Check } from "lucide-react";

export function ServiceHeroCard({
  title,
  description,
  icon,
  features,
  href,
  color,
}: {
  title: string;
  description: string;
  icon: React.ReactNode;
  features: string[];
  href: string;
  color: "blue" | "green" | "purple";
}) {
  // Use design system tokens for colors
  const colorClasses = {
    blue: {
      iconBg: "bg-info-soft",
      iconText: "text-info",
      border: "border-info/20",
      hoverBorder: "hover:border-info/40",
    },
    green: {
      iconBg: "bg-success-soft",
      iconText: "text-success",
      border: "border-success/20",
      hoverBorder: "hover:border-success/40",
    },
    purple: {
      iconBg: "bg-primary/10",
      iconText: "text-primary",
      border: "border-primary/20",
      hoverBorder: "hover:border-primary/40",
    },
  } 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-card">
        {/* 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-foreground">{title}</h3>
          </div>
        </div>

        {/* Description */}
        <p className="text-sm text-muted-foreground 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-foreground/80">
              <Check className="h-4 w-4 text-success mt-0.5 flex-shrink-0" />
              <span>{feature}</span>
            </li>
          ))}
        </ul>

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