import { Calendar, User } from 'lucide-react';

import * as React from 'react';

import { Link } from '@inertiajs/react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { cn } from '@/lib/utils';

interface BlogCardProps {
  title: string;
  slug: string;
  excerpt: string;
  author: string;
  publishedAt: string;
  className?: string;
}

export const BlogCard = React.forwardRef<HTMLDivElement, BlogCardProps>(
  ({ title, slug, excerpt, author, publishedAt, className }, ref) => {
    const formattedDate = new Date(publishedAt).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    });

    return (
      <Card ref={ref} className={cn('h-full transition-shadow hover:shadow-lg', className)}>
        <CardHeader>
          <CardTitle className="text-xl">
            <Link href={route('blog.show', slug)} className="hover:text-primary transition-colors">
              {title}
            </Link>
          </CardTitle>
          <div className="flex items-center gap-4 text-sm text-muted-foreground">
            <div className="flex items-center gap-1">
              <User className="h-4 w-4" aria-hidden="true" />
              <span>{author}</span>
            </div>
            <div className="flex items-center gap-1">
              <Calendar className="h-4 w-4" aria-hidden="true" />
              <time dateTime={publishedAt}>{formattedDate}</time>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <CardDescription className="text-base leading-relaxed">{excerpt}</CardDescription>
          <Link
            href={route('blog.show', slug)}
            className="mt-4 inline-block text-sm font-medium text-primary hover:underline"
          >
            Read more →
          </Link>
        </CardContent>
      </Card>
    );
  },
);
BlogCard.displayName = 'BlogCard';