"use client";

import React, { useState } from "react";
import Link from "next/link";

export interface BlogPostItem {
  id: number | string;
  alias: string;
  title: string;
  excerpt: string;
  createdAt?: string;
  imageUrl?: string | null;
}

interface HomeBlogTabsProps {
  recentPosts?: BlogPostItem[];
  mostViewedPosts?: BlogPostItem[];
  title?: string;
}

export function HomeBlogTabs({
  recentPosts = [],
  mostViewedPosts = [],
  title = "Explore Our Blogs for Academic Writing Help",
}: HomeBlogTabsProps) {
  const [activeTab, setActiveTab] = useState<"recent" | "mostViewed">("recent");

  const recentList = recentPosts;
  const mostViewedList = mostViewedPosts;
  const defaultImage = "/images/blog.jpg";

  if (recentList.length === 0 && mostViewedList.length === 0) {
    return null;
  }

  return (
    <section className="home-blog-section">
      <div className="container">
        <h2 className="home-subheading">{title}</h2>
        <div className="service-tab">
          <div className="tab">
            <button
              onClick={() => setActiveTab("recent")}
              className={`tablinks ${activeTab === "recent" ? "active" : ""}`}
              id="defaultOpen"
              data-id="recent-viewed"
            >
              Recent
            </button>
            <button
              onClick={() => setActiveTab("mostViewed")}
              className={`tablinks ${activeTab === "mostViewed" ? "active" : ""}`}
              data-id="most-viewed"
            >
              Most Viewed
            </button>
          </div>

          <div
            id="recent-viewed"
            className={`tabcontent ${activeTab === "recent" ? "active" : ""}`}
          >
            <ul className="panel_ul">
              {recentList.map((b) => (
                <li key={b.id}>
                  <Link href={`/blog/${b.alias}`}>
                    <div className="left-part">
                      <p className="blog-title">{b.title}</p>
                      <p className="blog-detail">{b.excerpt}</p>
                    </div>
                    <figure className="right-part" data-wf-figure="1">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        alt={b.title}
                        height="100%"
                        width="100%"
                        className="loaded"
                        src={b.imageUrl || defaultImage}
                        onError={(e) => {
                          const target = e.target as HTMLImageElement;
                          target.onerror = null;
                          target.src = defaultImage;
                        }}
                      />
                    </figure>
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div
            id="most-viewed"
            className={`tabcontent ${activeTab === "mostViewed" ? "active" : ""}`}
          >
            <ul className="panel_ul">
              {mostViewedList.map((b) => (
                <li key={b.id}>
                  <Link href={`/blog/${b.alias}`}>
                    <div className="left-part">
                      <p className="blog-title">{b.title}</p>
                      <p className="blog-detail">{b.excerpt}</p>
                    </div>
                    <figure className="right-part" data-wf-figure="1">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        alt={b.title}
                        height="100%"
                        width="100%"
                        className="loaded"
                        src={b.imageUrl || defaultImage}
                        onError={(e) => {
                          const target = e.target as HTMLImageElement;
                          target.onerror = null;
                          target.src = defaultImage;
                        }}
                      />
                    </figure>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}