import * as React from "react";
import Link from "next/link";
import { Card } from "./Layout";
import { ArrowRight } from "lucide-react";

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, tags } = post;

  const formattedDate = new Date(date).toLocaleDateString("de-DE", {
    month: "long",
    year: "numeric",
  });

  return (
    <Link href={`/blog/${slug}`} className="group block w-full">
      <Card
        variant="glass"
        padding="normal"
        techBorder={false}
        className="relative overflow-hidden transition-all duration-300 border-slate-100 hover:border-slate-300 bg-white/30 backdrop-blur-sm p-5 md:p-6"
      >
        <div className="space-y-3 md:space-y-4">
          <div className="flex items-center justify-between">
            <time className="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
              {formattedDate}
            </time>
            <div className="flex gap-1.5 md:gap-2">
              {tags?.slice(0, 2).map((tag) => (
                <span
                  key={tag}
                  className="text-[8px] md:text-[9px] font-mono text-slate-300 uppercase"
                >
                  #{tag}
                </span>
              ))}
            </div>
          </div>

          <div className="space-y-1.5 md:space-y-2">
            <h3 className="text-xl md:text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors">
              {title}
            </h3>
            <p className="text-sm md:text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
              {description}
            </p>
          </div>

          <div className="pt-1 md:pt-2 flex items-center gap-2 text-[9px] md:text-[10px] font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-all">
            <span>Beitrag öffnen</span>
            <ArrowRight className="w-3 h-3 translate-x-0 group-hover:translate-x-1 transition-transform" />
          </div>
        </div>
      </Card>
    </Link>
  );
};
