'use client';

import Image from 'next/image';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { ArrowUpRight } from 'lucide-react';
import { Reveal } from '@/components/ui/reveal';
import type { Locale } from '@/i18n/config';

export interface BlogCardData {
  slug: string;
  title: string;
  excerpt: string;
  coverImage?: string;
  authorName: string;
  publishedAt: string;
  readingMinutes?: number;
}

export function BlogCard({ post, locale, delay = 0 }: { post: BlogCardData; locale: Locale; delay?: number }) {
  const t = useTranslations('blog');
  return (
    <Reveal variant="up" delay={delay} className="h-full">
      <article className="group flex h-full flex-col overflow-hidden rounded-2xl border border-graphite-800/10 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-copper-600/10">
        <Link href={`/${locale}/blog/${post.slug}`} className="relative aspect-[16/10] overflow-hidden bg-graphite-900/5">
          {post.coverImage && (
            <Image
              src={post.coverImage}
              alt={post.title}
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-110"
            />
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-graphite-950/40 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
        </Link>
        <div className="flex flex-1 flex-col gap-2 p-5">
          <p className="text-xs uppercase tracking-wide text-volt-600">
            {new Date(post.publishedAt).toLocaleDateString(locale === 'ar' ? 'ar-TN' : 'fr-TN')}
            {post.readingMinutes ? ` · ${post.readingMinutes} ${t('minRead')}` : ''}
          </p>
          <Link href={`/${locale}/blog/${post.slug}`} className="font-display text-lg font-semibold transition-colors hover:text-copper-600">
            {post.title}
          </Link>
          <p className="line-clamp-2 text-sm text-graphite-900/60">{post.excerpt}</p>
          <p className="mt-auto flex items-center justify-between pt-3 text-xs text-graphite-900/50">
            <span>
              {t('by')} {post.authorName}
            </span>
            <ArrowUpRight className="h-4 w-4 text-copper-600 transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 rtl:group-hover:-translate-x-0.5" />
          </p>
        </div>
      </article>
    </Reveal>
  );
}