import Link from 'next/link';
import Image from 'next/image';
import type { BlogPost } from '../types';

interface BlogArticleCardProps {
  post: BlogPost;
}

const categoryColors: Record<string, string> = {
  guides: 'bg-violet-500/10',
  tutorials: 'bg-blue-500/10',
  'use-cases': 'bg-pink-500/10',
  news: 'bg-emerald-500/10',
};

const formatShortDate = (dateString: string): string => {
  const date = new Date(dateString);
  return date.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
  });
};

export const BlogArticleCard = ({ post }: BlogArticleCardProps) => {
  const overlayColor = categoryColors[post.category] || 'bg-violet-500/10';

  return (
    <Link
      href={`/blog/${post.slug}`}
      className="group flex flex-col bg-[#111827] rounded-xl overflow-hidden border border-white/5 hover:border-violet-500/50 transition-all hover:shadow-lg hover:shadow-violet-500/5 h-full"
    >
      <div className="aspect-video w-full relative overflow-hidden bg-gray-900">
        <div
          className={`absolute inset-0 ${overlayColor} group-hover:bg-transparent transition-colors z-10`}
        />
        <Image
          src={post.heroImage}
          alt={post.title}
          fill
          className="object-cover transition-transform duration-500 group-hover:scale-105 opacity-80 group-hover:opacity-100"
          sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
        />
        <div className="absolute top-3 left-3 z-20">
          <span className="inline-flex items-center rounded-md bg-black/60 backdrop-blur-md px-2.5 py-1 text-xs font-medium text-white ring-1 ring-inset ring-white/10 capitalize">
            {post.category}
          </span>
        </div>
      </div>
      <div className="p-5 flex flex-col flex-1">
        <h3 className="text-lg font-bold text-white mb-3 line-clamp-2 group-hover:text-violet-400 transition-colors leading-snug">
          {post.title}
        </h3>
        <p className="text-sm text-gray-400 mb-4 line-clamp-2">
          {post.description}
        </p>
        <div className="mt-auto flex items-center text-xs text-gray-500 font-medium">
          <span>{formatShortDate(post.date)}</span>
          <span className="mx-2">•</span>
          <span>{post.readTime}</span>
        </div>
      </div>
    </Link>
  );
};