'use client';

import Image from 'next/image';
import { Calendar, Clock, ArrowRight } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

export interface InsightCardProps {
  title: string;
  excerpt: string;
  category: string;
  readTime: string;
  publishedAt: string;
  imageUrl?: string;
  href: string;
  featured?: boolean;
}

export function InsightCard({
  title,
  excerpt,
  category,
  readTime,
  publishedAt,
  imageUrl,
  href,
  featured = false,
}: InsightCardProps) {
  return (
    <article
      className={`
        group relative overflow-hidden rounded-lg border border-[#E5E5E5]/50
        bg-white transition-all duration-300 hover:shadow-lg
        ${featured ? 'md:col-span-2' : ''}
      `}
    >
      {imageUrl && (
        <div className="relative h-48 overflow-hidden">
          <Image
            src={imageUrl}
            alt={title}
            fill
            className="object-cover transition-transform duration-300 group-hover:scale-105"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
        </div>
      )}
      
      <div className="p-6">
        <div className="flex items-center gap-3 mb-3">
          <Badge variant="secondary" className="text-xs">
            {category}
          </Badge>
          <div className="flex items-center gap-1 text-xs text-[#737373]">
            <Clock className="w-3 h-3" />
            <span>{readTime}</span>
          </div>
        </div>

        <h3 className="text-lg font-semibold text-[#171717] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
          {title}
        </h3>

        <p className="text-sm text-[#737373] mb-4 line-clamp-2">
          {excerpt}
        </p>

        <div className="flex items-center justify-between">
          <div className="flex items-center gap-1 text-xs text-[#A3A3A3]">
            <Calendar className="w-3 h-3" />
            <span>{publishedAt}</span>
          </div>

          <a
            href={href}
            className="inline-flex items-center gap-1 text-sm font-medium text-[#C41E3A] hover:gap-2 transition-all"
          >
            阅读更多
            <ArrowRight className="w-4 h-4" />
          </a>
        </div>
      </div>
    </article>
  );
}
