"use client";

import * as React from "react";
import Link from "next/link";
import { Reveal } from "../Reveal";
import { Clock, Calendar, ArrowLeft } from "lucide-react";

interface BlogPostHeaderProps {
  title: string;
  description: string;
  date: string;
  readingTime: number;
  slug: string;
}

export const BlogPostHeader: React.FC<BlogPostHeaderProps> = ({
  title,
  description,
  date,
  readingTime,
  slug,
}) => {
  return (
    <header className="pt-32 pb-8 md:pt-40 md:pb-12 max-w-4xl mx-auto px-5 md:px-0">
      <div className="space-y-8 md:space-y-10">
        <Reveal>
          <Link
            href="/blog"
            className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors mb-8 group"
          >
            <ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />
            Zurück zur Übersicht
          </Link>
          <div className="space-y-6">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-black text-slate-900 tracking-tighter leading-[1.1]">
              {title}
            </h1>
            <p className="font-serif italic text-slate-500 text-xl md:text-2xl leading-relaxed max-w-2xl">
              {description}
            </p>
          </div>
        </Reveal>

        <Reveal delay={0.2}>
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 py-6 border-y border-slate-100">
            <div className="flex items-center gap-6 text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">
              <div className="flex items-center gap-2">
                <Calendar className="w-3 h-3 text-slate-300" />
                <time dateTime={date}>{date}</time>
              </div>
              <div className="flex items-center gap-2">
                <Clock className="w-3 h-3 text-slate-300" />
                <span>{readingTime} min Lesezeit</span>
              </div>
            </div>

            <div className="flex items-center gap-4">
              <span className="text-[8px] font-mono text-slate-300 uppercase tracking-[0.5em]">
                {slug?.substring(0, 4).toUpperCase() || "BLOG"}-
                {slug
                  ? slug
                      .split("")
                      .reduce((acc, char) => acc + char.charCodeAt(0), 0)
                      .toString(16)
                      .toUpperCase()
                      .padStart(4, "0")
                  : "0000"}
              </span>
              <span
                className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"
                title="System Live"
              />
            </div>
          </div>
        </Reveal>
      </div>
    </header>
  );
};
