"use client";

import React, { useState } from "react";
import { Search, Calendar, User } from "lucide-react";

const blogsData = [
  {
    title: "The Future of Digital Marketing in 2026: Trends to Watch",
    date: "APR 15, 2026",
    author: "WRITTEN",
    category: "MARKETING",
    image: "/blog-1.jpg",
  },
  {
    title: "10 SEO Strategies That Actually Work for B2B Brands",
    date: "APR 10, 2026",
    author: "WRITTEN",
    category: "SEO",
    image: "/blog-2.jpg",
  },
  {
    title: "How AI is Transforming Search Engine Optimization",
    date: "APR 05, 2026",
    author: "WRITTEN",
    category: "AI SEO",
    image: "/blog-3.jpg",
  },
  {
    title: "Content Marketing Playbook: From Strategy to Execution",
    date: "MAR 28, 2026",
    author: "WRITTEN",
    category: "CONTENT",
    image: "/blog-4.jpg",
  },
  {
    title: "Local SEO in 2026: Rank Higher in Your City",
    date: "MAR 20, 2026",
    author: "WRITTEN",
    category: "LOCAL SEO",
    image: "/blog-5.jpg",
  },
  {
    title: "Top 7 Link Building Techniques That Still Work",
    date: "MAR 12, 2026",
    author: "WRITTEN",
    category: "SEO",
    image: "/blog-6.jpg",
  },
];

const BlogList = () => {
  const [search, setSearch] = useState("");

  const filteredBlogs = blogsData.filter((blog) =>
    blog.title.toLowerCase().includes(search.toLowerCase()),
  );

  return (
    <section className="py-10 lg:py-16 px-6 lg:px-16">
      <div className="mx-auto">
        <div className="flex justify-center mb-10">
          <div className="relative w-full max-w-md">
            <Search
              className="absolute left-3 top-1/2 -translate-y-1/2 text-[#676767]"
              size={18}
            />
            <input
              type="text"
              placeholder="Search"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="w-full pl-10 pr-4 py-3 rounded-full border border-[#DDDDDD] bg-white text-sm focus:outline-none focus:ring-2 focus:ring-[#794AFF]/30"
            />
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {filteredBlogs.map((blog, index) => (
            <div
              key={index}
              className="bg-white border border-[#DDDDDD] rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition group"
            >
              <div className="relative overflow-hidden">
                <img
                  src={blog.image}
                  alt={blog.title}
                  className="w-full h-56 object-cover group-hover:scale-105 transition duration-300"
                />

                <span className="absolute top-3 left-3 text-xs font-medium bg-white/90 text-[#794AFF] px-3 py-1 rounded-full shadow-sm">
                  {blog.category}
                </span>
              </div>

              <div className="p-4">
                <div className="flex items-center gap-4 text-xs text-[#676767]">
                  <div className="flex items-center gap-1">
                    <Calendar size={14} /> {blog.date}
                  </div>
                  <div className="flex items-center gap-1">
                    <User size={14} /> {blog.author}
                  </div>
                </div>

                <h3 className="mt-3 text-[#3B3B3B] font-medium text-lg lg:text-xl leading-snug">
                  {blog.title}
                </h3>

                <p className="mt-2 text-[#676767] text-sm">
                  Discover the latest digital marketing trends that will shape
                  strategies and drive unparalleled growth for brands looking to
                  dominate the online space.
                </p>

                <button className="mt-4 text-[#794AFF] text-sm font-medium hover:underline">
                  READ MORE →
                </button>
              </div>
            </div>
          ))}
        </div>

        {/* <div className="flex justify-center items-center gap-3 mt-10">
          <button className="w-8 h-8 rounded-full border border-[#DDDDDD] text-[#676767]">
            1
          </button>
          <button className="w-8 h-8 rounded-full bg-[#794AFF] text-white">
            2
          </button>
          <button className="w-8 h-8 rounded-full border border-[#DDDDDD] text-[#676767]">
            3
          </button>
        </div> */}
      </div>
    </section>
  );
};

export default BlogList;