"use client";
import React, { useState } from "react";
import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import Image from "next/image";

const BlogPost = ({ title, author, date, excerpt, imageUrl }) => (
  <div className="mb-6 flex sm:flex-row flex-col">
    <div className=" h-full bg-purple-100 sm:w-1/2">
      <Link href={`/blogs/blog/${title}`}>
        <Image
          src={imageUrl}
          alt={title || "Image"}
          className="object-cover rounded-md"
          layout="responsive"
          width={500}
          height={300}
        />
      </Link>
    </div>
    <div className="sm:w-2/3 p-4">
      <Link href={`/blogs/blog/${title}`}>
        <h3 className="text-xl sm:text-2xl font-bold">{title}</h3>
      </Link>
      <p className="text-sm sm:text-lg text-gray-500 mb-2">
        {author} | {date}
      </p>
      <p className="text-sm">{excerpt}</p>
    </div>
  </div>
);

const PopularArticle = ({ title, author, date }) => (
  <div className="mb-4">
    <h4 className="font-semibold">{title}</h4>
    <p className="text-sm text-gray-500">
      {author} | {date}
    </p>
  </div>
);

const BlogHome = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const postsPerPage = 3;

  const recentBlogPosts = [
    {
      title: "Benefits of Wearing Rudraksha Mala",
      author: "Gupta Rudraksha",
      date: "29 August, 2024",
      excerpt:
        "Rudraksha are sacred beads of great significance in Hinduism and various spiritual practices. The term Rudraksha combines two Sanskrit words: 'Rudra,' another name for Lord Sh...",
      imageUrl: "/blogs/significance-of-dhanteras.webp",
    },
    {
      title: "Shravan Maas for Spiritual Growth and Divine Connection",
      author: "Gupta Rudraksha",
      date: "04 September, 2024",
      excerpt:
        "Shrawan Mass, a sacred month in the Hindu calendar, holds deep spiritual significance for millions of devotees. But what exactly is Shravan Maas, and why is it so important? Let...",
      imageUrl: "/blogs/navaratri-siginificance.webp",
    },
    {
      title: "The Complete Guide to Rudraksha Energization",
      author: "Gupta Rudraksha",
      date: "28 August, 2024",
      excerpt:
        "For centuries, Rudraksha beads have been valued not only for their aesthetic beauty, but also for their powerful spiritual and healing properties. Whether you're a seasoned prac...",
      imageUrl: "/blogs/rudraksha-pran-pratishtha-pooja.webp",
    },
    {
      title: "Strengthening Planetary Forces with Rudraksha",
      author: "Gupta Rudraksha",
      date: "26 April, 2024",
      excerpt:
        "In the vast universe, planets hold immense power over our lives, influencing everything from our moods to our destinies. However, Rudraksha beads, ancient treasures from the ear...",
      imageUrl: "/api/placeholder/300/200",
    },
  ];

  const popularArticles = [
    {
      title: "Dhanteras Significance and How Rudraksha Brings Prosperity",
      author: "Gupta Rudraksha",
      date: "30 September, 2024",
    },
    {
      title:
        "Certified Rudraksha: Nepal's 1st ISO 9001:2015 Certified Organization",
      author: "Gupta Admin",
      date: "30 September, 2024",
    },
  ];

  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = recentBlogPosts.slice(indexOfFirstPost, indexOfLastPost);

  const paginate = (pageNumber) => setCurrentPage(pageNumber);

  return (
    <div className="container max-w-8xl mx-auto sm:px-20 px-3 ">
      <h1 className="sm:text-5xl pt-3 text-3xl font-bold mb-8">
        Insights from Gupta Rudraksha
      </h1>
      <p className="sm:text-2xl text-lg ">
        Explore our latest articles on the spiritual, cultural, and healing
        aspects
      </p>
      {/* top container for one blog card */}
      <dir className="min-h-[30vh]  flex sm:flex-row flex-col-reverse">
        <div className="mb-6 flex sm:flex-row flex-col">
          <div className="h-full bg-purple-100">
            <Link href={`/blogs/blog/`}>
              <Image
                src="/blogs/significance-of-dhanteras.webp"
                alt="images blog"
                layout="intrinsic"
                width={600} 
                height={400} 
                className="object-cover rounded-md"
              />
            </Link>
          </div>
          <div className="sm:w-2/3 p-4">
            <Link href={`/blogs/blog/`}>
              <h3 className="text-xl sm:text-2xl font-bold">
                Dhanteras Significance and How Rudraksha Brings Prosperity and
                Protection
              </h3>
            </Link>
            <p className="text-sm sm:text-lg text-gray-500 mb-2">
              Gupta Rudraksha | 30 September, 2024
            </p>
            <p className="text-sm py-4 line-clamp-2">
              Dhanteras, the first day of Diwali festival, marks a unique
              celebration of wealth and prosperity in Hindu tradition. As the
              name suggests - &apos;Dhan&apos; meaning wealth and
              &apos;Teras&apos; ref
            </p>
          </div>
        </div>
        <div className="w-full lg:w-1/3 px-4">
          <h2 className="text-2xl font-bold mb-4">Popular Articles</h2>
          {popularArticles.map((article, index) => (
            <PopularArticle key={index} {...article} />
          ))}
        </div>
      </dir>

      <div className="flex flex-wrap -mx-4">
        <div className="w-full lg:w-2/3  px-4">
          <h2 className="sm:text-4xl text-2xl font-bold mb-4">Recent Blogs</h2>
          {currentPosts.map((post, index) => (
            <BlogPost key={index} {...post} />
          ))}
          <div className="flex justify-center space-x-2 mb-8 items-center pt-6">
            {[...Array(Math.ceil(recentBlogPosts.length / postsPerPage))].map(
              (_, index) => (
                <Button
                  key={index}
                  onClick={() => paginate(index + 1)}
                  variant={currentPage === index + 1 ? "default" : "outline"}
                >
                  {index + 1}
                </Button>
              )
            )}
          </div>
        </div>

        <div className="w-full lg:w-1/3 px-4">
          <h2 className="text-2xl font-bold mb-4">Popular Articles</h2>
          {popularArticles.map((article, index) => (
            <PopularArticle key={index} {...article} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default BlogHome;