import Image from 'next/image';
import { Clock } from 'lucide-react';
import type { BlogPost } from '../types';
import { formatDate } from '../utils';
import { BlogBreadcrumbs } from './BlogBreadcrumbs';

interface BlogPostHeaderProps {
  post: BlogPost;
}

export const BlogPostHeader = ({ post }: BlogPostHeaderProps) => {
  return (
    <header className="relative overflow-hidden bg-[#0B0F19] text-white pt-12 pb-16 lg:pt-20 lg:pb-24">
      {/* Blur blob decorations */}
      <div className="absolute inset-0 z-0">
        <div className="absolute -top-24 -left-24 w-96 h-96 bg-violet-500/20 rounded-full blur-3xl" />
        <div className="absolute top-1/2 right-0 w-[500px] h-[500px] bg-pink-600/10 rounded-full blur-3xl transform translate-x-1/3 -translate-y-1/2" />
      </div>

      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
        <div className="lg:grid lg:grid-cols-12 lg:gap-16 items-center">
          {/* Left column - Content */}
          <div className="lg:col-span-7 mb-12 lg:mb-0">
            <div className="mb-8">
              <BlogBreadcrumbs
                items={[
                  { label: 'Blog', href: '/blog' },
                  { label: post.category },
                  { label: post.title },
                ]}
              />
            </div>

            <div className="flex items-center gap-2 mb-8">
              <span className="inline-flex items-center rounded-full bg-violet-500/20 px-3 py-1 text-xs font-medium text-violet-400 ring-1 ring-inset ring-violet-500/30">
                {post.category}
              </span>
              <span className="text-gray-400 text-sm flex items-center gap-1 ml-2">
                <Clock className="w-4 h-4" />
                {post.readTime}
              </span>
            </div>

            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-8 leading-tight text-white">
              {post.title}
            </h1>

            <p className="text-lg sm:text-xl text-gray-300 mb-10 max-w-2xl leading-relaxed">
              {post.description}
            </p>

            <div className="flex items-center gap-4 border-t border-white/10 pt-8">
              <Image
                src={post.author.avatar}
                alt={post.author.name}
                width={48}
                height={48}
                className="rounded-full ring-2 ring-[#0B0F19] object-cover"
              />
              <div>
                <div className="font-medium text-white text-base">
                  {post.author.name}
                </div>
                <div className="text-sm text-gray-400">
                  {formatDate(post.date)}
                </div>
              </div>
            </div>
          </div>

          {/* Right column - Hero image */}
          <div className="lg:col-span-5 relative">
            <div className="relative rounded-xl overflow-hidden shadow-2xl ring-1 ring-white/10 bg-black/40 backdrop-blur-sm">
              <Image
                src={post.heroImage}
                alt={post.title}
                width={800}
                height={600}
                className="w-full h-auto object-cover aspect-[4/3]"
                priority
              />
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};