import TrendingNow from "./TrendingNow";
import LatestPosts from "./LatestPosts";
import LatestTags from "./LatestTags";
import Image from "next/image";

export default function BlogSidebar({ trendingBlogs, latestBlogs }: any) {
  return (
    <aside className="space-y-10">
      {/* Author Card */}
      <div className="relative overflow-hidden rounded-2xl border border-gold/20 bg-gradient-to-b from-ivory to-white shadow-lg">
        {/* Gold Accent */}
        <div className="h-1 w-full bg-gradient-to-r from-gold via-yellow-300 to-gold" />

        <div className="px-8 py-4 text-center">
          <span className="inline-block rounded-full border border-gold/30 bg-gold/10 px-4 py-1 text-xs font-medium uppercase tracking-[0.25em] text-gold-deep">
            Author
          </span>

          <div className="mt-4 flex justify-center">
            <div className="rounded-full border border-gold/30 bg-white p-5 shadow-md">
              <Image
                src="https://pub-b0bc1a7c71a54576bbf43595e30e6188.r2.dev/images/hero/the-grand-heritage-resorts-pune.png"
                alt="The Grand Heritage Resort"
                title="The Grand Heritage Resort"
                width={150}
                height={75}
                className="h-auto w-auto max-h-40 object-contain"
                priority
              />
            </div>
          </div>

          <h3 className="mt-4 font-serif text-3xl text-espresso">
            The Grand Heritage Resorts
          </h3>

          <div className="mx-auto mt-2 h-px w-full bg-gold/50" />

          <p className="mt-3 text-sm leading-7 text-espresso/70">
            Experience timeless elegance at The Grand Heritage Resorts, Pune, spread across 10 scenic acres. We offer a luxury stay and beautiful venues perfect for weddings, events, and special celebrations. Enjoy spacious surroundings, premium comfort, and a memorable experience for you and your guests.
          </p>
        </div>
      </div>

      {/* Widgets */}
      <div className="rounded-2xl border border-espresso/10 bg-white p-4 shadow-sm">
        <TrendingNow blogs={trendingBlogs} />
      </div>

      <div className="rounded-2xl border border-espresso/10 bg-white p-4 shadow-sm">
        <LatestPosts blogs={latestBlogs} />
      </div>

      <div className="rounded-2xl border border-espresso/10 bg-white p-4 shadow-sm">
        <LatestTags />
      </div>
    </aside>
  );
}