"use client"

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

interface BlogCardProps {
  post: Post
}

export function BlogCard({ post }: BlogCardProps) {
  return (
    <motion.div whileHover={{ y: -5 }} transition={{ duration: 0.3 }}>
      <Link href={`/blog/${post.slug}`} 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={post.coverImage || "/placeholder.svg"} alt={post.title} fill className="object-cover" />
            </motion.div>
          </div>
          <CardContent className="p-6">
            <div className="flex items-center gap-2 mb-3">
              <Badge
                variant="secondary"
                className="bg-primary-100 text-primary-900 dark:bg-primary-900 dark:text-primary-100"
              >
                {post.category}
              </Badge>
              <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
                <Calendar className="h-3 w-3 mr-1" />
                {post.date}
              </div>
              <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
                <Clock className="h-3 w-3 mr-1" />
                {post.readTime}
              </div>
            </div>
            <h3 className="text-xl font-bold text-primary-900 dark:text-primary-300 mb-2 line-clamp-2">{post.title}</h3>
            <p className="text-gray-500 dark:text-gray-400 mb-4 line-clamp-3">{post.excerpt}</p>
            <div className="flex flex-wrap gap-2 mb-4">
              {post.tags.map((tag, index) => (
                <Badge
                  key={index}
                  variant="outline"
                  className="bg-transparent border-primary-200 text-primary-700 dark:border-primary-800 dark:text-primary-300"
                >
                  {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"
            >
              Leggi post
              <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>
  )
}