'use client'

import Link from 'next/link'
import { motion } from 'framer-motion'
import { LucideIcon } from 'lucide-react'
import { LiveIndicator } from './LiveIndicator'

interface FeatureCardProps {
  icon: LucideIcon
  title: string
  description: string
  href: string
  stat?: string
  status?: 'live' | 'offline' | 'pending'
}

export function FeatureCard({
  icon: Icon,
  title,
  description,
  href,
  stat,
  status = 'live',
}: FeatureCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
    >
      <Link href={href}>
        <motion.div
          whileHover={{ y: -8, boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1)' }}
          className="h-full border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer bg-white dark:bg-gray-900"
        >
          <div className="flex items-start justify-between mb-4">
            <Icon className="w-8 h-8 text-blue-600 dark:text-blue-400" />
            <LiveIndicator status={status} />
          </div>
          <h3 className="text-lg font-bold mb-2">{title}</h3>
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
            {description}
          </p>
          {stat && (
            <div className="text-xs font-mono text-blue-600 dark:text-blue-400">
              {stat}
            </div>
          )}
        </motion.div>
      </Link>
    </motion.div>
  )
}