import { ArticleModel } from '@/lib/feature/article/article.model';
import { cn } from '@/ui/components/shadcn/lib/utils';
import { CalendarIcon } from 'lucide-react';
import Link from 'next/link';

interface ArticleCardProps {
    article: ArticleModel;
    className?: string;
}

const formatDate = (date: Date) =>
    new Intl.DateTimeFormat('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
    }).format(date);

export const ArticleCard = ({ article, className }: ArticleCardProps) => {
    return (
        <Link
            href={`/article/${article.slug}`}
            className={cn(
                'group flex flex-col overflow-hidden rounded-xl border border-border bg-card text-card-foreground transition-all duration-200 hover:border-foreground/20 hover:shadow-md',
                className
            )}
        >
            <div className='relative aspect-video w-full overflow-hidden bg-muted'>
                {article.coverImageUrl ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                        src={article.coverImageUrl}
                        alt={article.title}
                        className='h-full w-full object-cover transition-transform duration-300 group-hover:scale-105'
                    />
                ) : (
                    <div className='flex h-full items-center justify-center bg-gradient-to-br from-muted to-muted/60'>
                        <span className='font-mono text-5xl font-bold text-muted-foreground/20'>
                            {'{ }'}
                        </span>
                    </div>
                )}
            </div>

            <div className='flex flex-1 flex-col gap-3 p-5'>
                <div className='flex items-center gap-1.5 text-xs text-muted-foreground'>
                    <CalendarIcon className='size-3 shrink-0' />
                    <time dateTime={article.createdAt.toISOString()}>
                        {formatDate(article.createdAt)}
                    </time>
                </div>

                <h2 className='line-clamp-2 text-base font-bold leading-snug tracking-tight transition-colors group-hover:text-primary'>
                    {article.title}
                </h2>

                <p className='line-clamp-3 flex-1 text-sm leading-relaxed text-muted-foreground'>
                    {article.description}
                </p>

                <span className='mt-1 text-xs font-medium text-foreground/60 underline-offset-4 group-hover:text-primary group-hover:underline'>
                    Read more →
                </span>
            </div>
        </Link>
    );
};