import Image from "next/image";
import Link from "next/link";
import type { BlogPost } from "@/data/blog-posts";
import { BlogSmiley } from "./BlogSmiley";

interface BlogPostHeaderProps {
  post: BlogPost;
}

export function BlogPostHeader({ post }: BlogPostHeaderProps) {
  return (
    <>
      <header className="b-wrap b-post-header">
        {/* Breadcrumb */}
        <div className="b-post-breadcrumb">
          <span className="b-meta" style={{ fontSize: 14 }}>
            <Link
              href="/blogs"
              style={{ color: "var(--b-ink-soft)", textDecoration: "none" }}
            >
              Blog
            </Link>
            <span className="b-sep" />
            <span style={{ color: "var(--b-blue-deep)", fontWeight: 600 }}>
              {post.cat}
            </span>
          </span>
        </div>

        <h1 className="b-post-title">{post.title}</h1>
        <p className="b-post-excerpt">{post.excerpt}</p>

        {/* Byline */}
        <div className="b-byline">
          <div className="b-byline-author">
            <BlogSmiley size={46} />
            <div style={{ lineHeight: 1.3 }}>
              <div className="b-byline-name">The DesignShare Team</div>
              {/* <div className="b-byline-role">
                <a
                  href="https://eleganttechbd.com/"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ color: "var(--b-ink-soft)", textDecoration: "none" }}
                >
                  Elegant IT Limited
                </a>
              </div> */}
            </div>
          </div>
          <div className="b-byline-divider" />
          <span className="b-meta" style={{ fontSize: 14 }}>
            <span>{post.date}</span>
            <span className="b-sep" />
            <span>{post.read} read</span>
          </span>
        </div>
      </header>

      {/* Cover image */}
      <div className="b-wrap">
        <div className="b-post-cover">
          <Image
            src={post.image}
            alt={post.title}
            fill
            sizes="(max-width: 1240px) 100vw, 1240px"
            style={{ objectFit: "cover" }}
            priority
          />
          <span
            className="b-badge"
            style={{ position: "absolute", top: 20, left: 20 }}
          >
            <span className="b-dot" /> {post.kicker}
          </span>
        </div>
      </div>
    </>
  );
}
