'use client'

import Link from 'next/link'
import { motion } from 'framer-motion'
import { Clock } from 'lucide-react'
import { Project } from '@/lib/types'
import { DifficultyBadge } from './DifficultyBadge'
import { AgeBadge } from './AgeBadge'
import { ProjectIllustration } from './ProjectIllustration'

export function ProjectCard({ project }: { project: Project }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ y: -4 }}
      transition={{ duration: 0.3 }}
    >
      <Link href={`/projekte/${project.slug}`} className="block">
        <div className="bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden border border-primary/5">
          <div className="bg-cream p-6 flex items-center justify-center h-44">
            <ProjectIllustration slug={project.slug} size={120} />
          </div>
          <div className="p-5">
            <h3 className="font-heading font-bold text-lg mb-2">{project.name}</h3>
            <p className="text-sm text-dark/60 mb-3 line-clamp-2">{project.description}</p>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <AgeBadge range={project.ageRange} />
                <DifficultyBadge level={project.difficulty} />
              </div>
              <div className="flex items-center gap-1 text-xs text-dark/40">
                <Clock className="w-3.5 h-3.5" />
                {project.duration}
              </div>
            </div>
          </div>
        </div>
      </Link>
    </motion.div>
  )
}