'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { CheckCircle2 } from 'lucide-react';

// ۱. تعریف Type برای داده‌های ورودی کامپوننت
// این همان اینترفیس ServiceItem از فایل اصلی شماست
export interface ServiceItem {
  id: string;
  title: string;
  subtitle: string;
  icon: React.ElementType;
  color: string;
  description: string;
  capabilities: string[];
  techStack: string[];
}

// ۲. تعریف Props کامپوننت کارت
interface ServiceCardProps {
  service: ServiceItem;
  index: number; // برای تأخیر انیمیشن
}

const ServiceCard: React.FC<ServiceCardProps> = ({ service, index }) => {
  const Icon = service.icon;

  return (
    <motion.div
      initial={{ opacity: 0, y: 15 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.35, delay: index * 0.08 }}
      className="group relative flex flex-col justify-between p-6 rounded-2xl bg-gray-900/30 border border-gray-800/80 hover:border-indigo-500/30 hover:bg-gray-900/50 transition-all duration-300"
    >
      {/* Header Card */}
      <div>
        <div className="flex items-center justify-between mb-5">
          <div className={`w-11 h-11 rounded-xl border flex items-center justify-center transition-transform group-hover:scale-105 ${service.color}`}>
            <Icon className="w-5 h-5" />
          </div>
          <span className="font-mono text-[11px] text-gray-500 font-bold tracking-wider">
            {service.id}
          </span>
        </div>

        <h3 className="text-base font-bold text-white group-hover:text-indigo-200 transition-colors mb-1">
          {service.title}
        </h3>
        <p className="text-[11px] font-mono text-gray-500 mb-3 uppercase tracking-wide">
          {service.subtitle}
        </p>

        <p className="text-xs text-gray-400 leading-relaxed mb-5 text-justify">
          {service.description}
        </p>

        {/* Capabilities List */}
        <div className="space-y-2 mb-6 pt-4 border-t border-gray-800/60">
          <span className="text-[11px] font-mono text-gray-400 font-semibold block">قابلیت‌های کلیدی:</span>
          {service.capabilities.map((cap, i) => (
            <div key={i} className="flex items-start gap-2 text-xs text-gray-300">
              <CheckCircle2 className="w-3.5 h-3.5 text-indigo-400 shrink-0 mt-0.5" />
              <span>{cap}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Tech Stack Footer */}
      <div className="pt-4 border-t border-gray-800/60 flex flex-wrap gap-1.5">
        {service.techStack.map((tech) => (
          <span
            key={tech}
            className="text-[10px] font-mono px-2.5 py-1 rounded bg-gray-950 border border-gray-800 text-gray-400 group-hover:border-gray-700 transition-colors"
          >
            {tech}
          </span>
        ))}
      </div>
    </motion.div>
  );
};

export default ServiceCard;