"use client"

import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"
import Image from "next/image"
import { motion } from "framer-motion"
import Link from "next/link"
import { Portfolio } from "content-collections"

interface ProjectCardProps {
  project: Portfolio,
}

export function ProjectCard({ project: { title, description, tags, image, year, _meta }}: ProjectCardProps) {
  return (
    <motion.div whileHover={{ y: -5 }} transition={{ duration: 0.3 }}>
      <Link href={`/portfolio/${_meta.path}`} className="block h-full">
        <Card className="overflow-hidden border-primary-100 dark:border-primary-800 hover:shadow-md transition-shadow h-full">
          <div className="relative h-48 w-full overflow-hidden">
            <motion.div whileHover={{ scale: 1.05 }} transition={{ duration: 0.5 }} className="h-full w-full">
              <Image src={image || "/placeholder.svg"} alt={title} fill className="object-cover" />
            </motion.div>
          </div>
          <CardContent className="p-6">
            <h3 className="text-xl font-bold text-primary-900 dark:text-primary-300 mb-2">{title} <span className="font-normal text-sm">({year})</span></h3>
            <p className="text-gray-500 dark:text-gray-400 mb-4">{description}</p>
            <div className="flex flex-wrap gap-2">
              {tags.map((tag, index) => (
                <Badge
                  key={index}
                  variant="secondary"
                  className="bg-primary-100 text-primary-900 dark:bg-primary-900 dark:text-primary-100 hover:bg-primary-200 dark:hover:bg-primary-800"
                >
                  {tag}
                </Badge>
              ))}
            </div>
          </CardContent>
          <CardFooter className="p-6 pt-0">
            <Button
              variant="ghost"
              className="text-primary-900 dark:text-primary-300 hover:bg-primary-100 hover:text-primary-900 dark:hover:bg-primary-900 dark:hover:text-primary-100 p-4 group"
            >
              Vedi progetto
              <motion.div
                className="inline-block ml-2"
                initial={{ x: 0 }}
                whileHover={{ x: 5 }}
                transition={{ duration: 0.3 }}
              >
                <ArrowRight className="h-4 w-4" />
              </motion.div>
            </Button>
          </CardFooter>
        </Card>
      </Link>
    </motion.div>
  )
}