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

interface Post {
  title: string;
  description: string;
  date: string;
  slug: string;
  tags?: string[];
  thumbnail?: 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 h-full outline-none">
      <article className="relative overflow-hidden transition-all duration-500 border border-slate-200/50 hover:border-slate-300/80 bg-white/60 hover:bg-white/80 backdrop-blur-xl rounded-[2rem] shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] flex flex-col md:flex-row h-full">
        {/* Premium Large Thumbnail Section */}
        <div className="w-full md:w-[42%] aspect-[16/9] md:aspect-auto md:min-h-[280px] overflow-hidden relative bg-slate-50 border-b md:border-b-0 md:border-r border-slate-100/50 shrink-0">
          {post.thumbnail ? (
            <img
              src={post.thumbnail}
              alt={title}
              className="w-full h-full object-cover grayscale-[0.2] group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700 ease-out"
            />
          ) : (
            <BlogThumbnailSVG
              slug={slug}
              variant="square"
              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out"
            />
          )}
          {/* Subtle inset shadow over the image */}
          <div className="absolute inset-0 ring-1 ring-inset ring-slate-900/5 rounded-t-[2rem] md:rounded-l-[2rem] md:rounded-tr-none pointer-events-none" />
        </div>

        {/* Content Section */}
        <div className="flex-1 flex flex-col p-6 md:p-8 lg:p-10">
          <div className="flex items-center justify-between mb-5">
            <time className="text-[10px] md:text-xs font-bold uppercase tracking-[0.2em] text-slate-400">
              {formattedDate}
            </time>
            <div className="flex flex-wrap gap-2 justify-end">
              {tags?.slice(0, 3).map((tag) => (
                <span
                  key={tag}
                  className="px-2.5 py-1 bg-slate-100/50 rounded-md text-[9px] md:text-[10px] font-mono text-slate-500 uppercase tracking-wider"
                >
                  #{tag}
                </span>
              ))}
            </div>
          </div>

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

          <div className="pt-6 mt-6 flex items-center justify-between text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400 group-hover:text-slate-900 transition-all border-t border-slate-100/50">
            <span>Read Article</span>
            <div className="flex items-center justify-center w-8 h-8 rounded-full bg-slate-100 group-hover:bg-slate-900 group-hover:text-white transition-colors duration-300">
              <ArrowRight className="w-4 h-4 translate-x-0 group-hover:translate-x-0.5 transition-transform" />
            </div>
          </div>
        </div>
      </article>
    </Link>
  );
};