'use client';

import { motion } from 'framer-motion';
import type { CaseStudy } from '@/lib/constants/products';

interface CaseStudyCardProps {
  study: CaseStudy;
  index: number;
}

export function CaseStudyCard({ study, index }: CaseStudyCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-50px' }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
      className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md"
    >
      <div className="mb-3 flex items-center gap-2">
        <span className="rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-[#C41E3A]">
          {study.industry}
        </span>
        <span className="text-sm text-gray-500">{study.client}</span>
      </div>

      <h4 className="mb-2 text-sm font-semibold text-gray-900">挑战</h4>
      <p className="mb-4 text-sm leading-relaxed text-gray-600">{study.challenge}</p>

      <h4 className="mb-2 text-sm font-semibold text-gray-900">解决方案</h4>
      <p className="mb-4 text-sm leading-relaxed text-gray-600">{study.solution}</p>

      <div className="rounded-lg bg-green-50 p-3">
        <p className="text-sm font-medium text-green-800">{study.result}</p>
      </div>
    </motion.div>
  );
}