'use client'

import { motion } from 'framer-motion'
import { PitchFeature, Language } from '@/lib/types'
import { Check, X, Star } from 'lucide-react'
import BrandName from './BrandName'

interface FeatureMatrixProps {
  features: PitchFeature[]
  lang: Language
}

function Cell({ value, isDiff }: { value: boolean; isDiff: boolean }) {
  return (
    <td className="px-4 py-3 text-center">
      {value ? (
        <motion.span
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{ type: 'spring', stiffness: 500, delay: 0.1 }}
        >
          <Check className={`w-5 h-5 mx-auto ${isDiff ? 'text-green-400' : 'text-white/50'}`} />
        </motion.span>
      ) : (
        <X className="w-5 h-5 mx-auto text-white/20" />
      )}
    </td>
  )
}

export default function FeatureMatrix({ features, lang }: FeatureMatrixProps) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-white/10">
            <th className="text-left px-4 py-3 font-medium text-white/60">Feature</th>
            <th className="px-4 py-3 font-bold text-indigo-400"><BrandName /></th>
            <th className="px-4 py-3 font-medium text-white/60">Proliance</th>
            <th className="px-4 py-3 font-medium text-white/60">DataGuard</th>
            <th className="px-4 py-3 font-medium text-white/60">heyData</th>
          </tr>
        </thead>
        <tbody>
          {features.map((f, i) => (
            <motion.tr
              key={f.id}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: i * 0.05 }}
              className={`border-b border-white/5 ${f.is_differentiator ? 'bg-indigo-500/5' : ''}`}
            >
              <td className="px-4 py-3 flex items-center gap-2">
                {f.is_differentiator && <Star className="w-3.5 h-3.5 text-yellow-400" />}
                <span className={f.is_differentiator ? 'text-white font-medium' : 'text-white/70'}>
                  {lang === 'de' ? f.feature_name_de : f.feature_name_en}
                </span>
              </td>
              <Cell value={f.breakpilot} isDiff={f.is_differentiator} />
              <Cell value={f.proliance} isDiff={false} />
              <Cell value={f.dataguard} isDiff={false} />
              <Cell value={f.heydata} isDiff={false} />
            </motion.tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}