interface BlogCardProps {
  title: string
  excerpt: string
  date: string
  readTime: string
}

export function BlogCard({ title, excerpt, date, readTime }: BlogCardProps) {
  return (
    <article className="group glass glass-hover p-6 sm:p-8 rounded-lg transition-all duration-500 cursor-pointer">
      <div className="space-y-4">
        <div className="flex items-center justify-between text-xs text-muted-foreground font-mono">
          <span>{date}</span>
          <span>{readTime}</span>
        </div>

        <h3 className="text-lg sm:text-xl font-medium group-hover:text-muted-foreground transition-colors duration-300">
          {title}
        </h3>

        <p className="text-muted-foreground leading-relaxed">{excerpt}</p>

        <div className="flex items-center gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
          <span>Read more</span>
          <svg
            className="w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </div>
      </div>
    </article>
  )
}