"use client";

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

interface BlogFeaturedProps {
  post: BlogPost;
}

export function BlogFeatured({ post }: BlogFeaturedProps) {
  const [hover, setHover] = useState(false);

  return (
    <div className="b-wrap b-featured-link">
      <Link
        href={`/blog/${post.slug}`}
        style={{ display: "block", textDecoration: "none", color: "inherit" }}
      >
        <article
          className="b-featured"
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
        >
          {/* Cover image */}
          <div className="b-featured-img">
            <Image
              src={post.image}
              alt={post.title}
              fill
              sizes="(max-width: 820px) 100vw, 55vw"
              style={{ objectFit: "cover", transition: "transform .55s cubic-bezier(.22,.61,.36,1)", transform: hover ? "scale(1.045)" : "scale(1)" }}
              priority
            />
            <span className="b-badge" style={{ position: "absolute", top: 20, left: 20 }}>
              <span className="b-dot" /> Featured guide
            </span>
          </div>

          {/* Content */}
          <div className="b-featured-body">
            <span className="b-tag b-tag-blue" style={{ alignSelf: "flex-start" }}>
              {post.cat}
            </span>
            <h2 className="b-featured-title">{post.title}</h2>
            <p className="b-featured-excerpt">{post.excerpt}</p>
            <div style={{ flex: 1 }} />
            <div className="b-featured-footer">
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <BlogSmiley size={30} />
                <span style={{ fontSize: 14, fontWeight: 600, color: "var(--b-ink)" }}>
                  The DesignShare Team
                </span>
              </div>
              <span className="b-meta">
                <span>{post.date}</span>
                <span className="b-sep" />
                <span>{post.read} read</span>
              </span>
            </div>
          </div>
        </article>
      </Link>
    </div>
  );
}