"use client";
import React from "react";
import { motion } from "framer-motion";

interface ServiceCardProps {
  title: string;
  description: string;
  href?: string;
  icon?: string;
  index?: number;
}

export default function ServiceCard({
  title,
  description,
  href,
  icon,
  index,
}: ServiceCardProps) {
  const Wrapper = href ? "a" : "div";

  return (
    <Wrapper href={href}>
      <motion.div
        className="relative rounded-2xl p-6 border soft bg-white hover:bg-gray-100 shadow-md cursor-pointer group overflow-hidden will-change-transform"
        whileHover={{ scale: 1.03 }}
        transition={{ duration: 0.2, ease: "easeOut" }}
      >
        {index !== undefined && (
          <motion.span
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.25, ease: "easeOut" }}
            className="absolute top-4 left-4 text-4xl font-extrabold text-gray-300 group-hover:text-secondary transition-colors duration-300"
          >
            {String(index + 1).padStart(2, "0")}
          </motion.span>
        )}

        <h3 className="font-bold mb-2 text-lg">
          {icon && <span className="mr-2">{icon}</span>} {title}
        </h3>
        <p className="text-sm text-gray-600 leading-relaxed">{description}</p>
      </motion.div>
    </Wrapper>
  );
}