import * as React from 'react';
import Link from 'next/link';

interface Post {
  title: string;
  description: string;
  date: string;
  slug: string;
  tags?: string[];
}

interface MediumCardProps {
  post: Post;
}

export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
  const { title, description, date, slug } = post;

  const formattedDate = new Date(date).toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
  });

  return (
    <Link href={`/blog/${slug}`} className="group block">
      <article className="space-y-4 py-8 px-8 border border-slate-200 rounded-3xl group-hover:border-slate-400 transition-all duration-500 bg-white">
        <time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 group-hover:text-slate-900 transition-colors">
          {formattedDate}
        </time>
        
        <h3 className="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight group-hover:text-slate-900 transition-colors">
          {title}
        </h3>
        
        <p className="text-xl text-slate-500 font-serif italic leading-snug line-clamp-2">
          {description}
        </p>
        
        <div className="pt-4 flex items-center gap-4 text-slate-900 font-bold text-xs uppercase tracking-widest group/link">
          Lesen
          <div className="w-10 h-px bg-slate-200 group-hover:bg-slate-400 group-hover:w-16 transition-all duration-500"></div>
        </div>
      </article>
    </Link>
  );
};