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

interface BlogCardProps {
  post: BlogPost;
}

export const BlogCard = ({ post }: BlogCardProps) => {
  return (
    <Link
      href={`/blog/${post.slug}`}
      className="block border border-white/10 rounded-lg overflow-hidden hover:border-purple-500/50 transition-colors"
    >
      <div className="aspect-video relative bg-slate-800">
        <Image
          src={post.heroImage}
          alt={post.title}
          fill
          className="object-cover"
        />
      </div>
      <div className="p-4">
        <div className="text-xs text-purple-400 mb-2">{post.category}</div>
        <h3 className="text-lg font-semibold text-white mb-2">{post.title}</h3>
        <p className="text-sm text-gray-400 mb-4 line-clamp-2">
          {post.description}
        </p>
        <div className="flex items-center gap-3 text-xs text-gray-500">
          <div className="flex items-center gap-2">
            <Image
              src={post.author.avatar}
              alt={post.author.name}
              width={20}
              height={20}
              className="rounded-full"
            />
            <span>{post.author.name}</span>
          </div>
          <span>{formatDate(post.date)}</span>
          <span>{post.readTime}</span>
        </div>
      </div>
    </Link>
  );
};
