'use client'

import Image from 'next/image'
import * as motion from 'framer-motion/m'
import { useTranslations } from 'next-intl'
import { Calendar, Clock, ArrowRight, Newspaper } from 'lucide-react'
import { Link } from '@/i18n/navigation'
import type { BlogPostSummary } from '@/lib/db/queries/getBlogPosts'

interface BlogCardProps {
  post: BlogPostSummary
}

export default function BlogCard({ post }: BlogCardProps) {
  const t = useTranslations('Blog')

  return (
    <motion.article
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      whileHover={{ y: -5 }}
      className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-300"
    >
      {/* Cover Image */}
      <Link href={`/blog/${post.slug}`} className="block overflow-hidden">
        <div className="relative h-48 bg-gray-100">
          {post.imageUrl ? (
            <Image src={post.imageUrl} alt={post.title} fill sizes="(max-width: 768px) 100vw, 400px" className="object-cover" />
          ) : (
            <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-primary/10 to-secondary/10">
              <Newspaper size={40} className="text-primary/30" />
            </div>
          )}
        </div>
      </Link>

      {/* Content */}
      <div className="p-5">
        {/* Category Badge */}
        {post.categorySlug && (
          <Link
            href={{ pathname: '/blogs', query: { category: post.categorySlug } }}
            className="inline-block text-xs font-medium text-primary bg-primary/10 px-2 py-1 rounded-full mb-3 hover:bg-primary hover:text-white transition"
          >
            {post.categoryName}
          </Link>
        )}

        {/* Title */}
        <Link href={`/blog/${post.slug}`}>
          <h2 className="text-xl font-bold text-dark mb-2 hover:text-primary transition line-clamp-2">
            {post.title}
          </h2>
        </Link>

        {/* Excerpt */}
        {post.excerpt && <p className="text-gray-custom text-sm mb-4 line-clamp-3">{post.excerpt}</p>}

        {/* Meta Info */}
        <div className="flex flex-wrap items-center gap-4 text-xs text-gray-custom mb-4">
          <div className="flex items-center gap-1">
            <Calendar size={12} />
            <span>{new Date(post.publishedAt).toLocaleDateString()}</span>
          </div>
          <div className="flex items-center gap-1">
            <Clock size={12} />
            <span>{t('readTimeMinutes', { minutes: post.readTimeMinutes })}</span>
          </div>
        </div>

        {/* Read More */}
        <Link
          href={`/blog/${post.slug}`}
          className="inline-flex items-center gap-1 text-primary font-medium text-sm hover:gap-2 transition-all"
        >
          {t('readMore')} <ArrowRight size={14} />
        </Link>
      </div>
    </motion.article>
  )
}