import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Bookmark } from "lucide-react";

const BlogSection = () => {
  const articles = [
    {
      id: 1,
      image: "https://themes.easital.com/html/liston/v2.3/assets/images/blog/01-lg.jpg",
      category: "Events",
      title: "Etiam Dapibus Metus Aliquam Orci Venenatis, Suscipit Efficitur.",
      date: "9 hours ago",
      author: {
        name: "Ethan Blackwood",
        role: "Engineer",
        avatar: "https://themes.easital.com/html/liston/v2.3/assets/images/avatar/01.jpg"
      }
    },
    {
      id: 2,
      image: "https://themes.easital.com/html/liston/v2.3/assets/images/blog/02-lg.jpg",
      category: "Events",
      title: "Praesent sit amet augue tincidunt, venenatis risus ut.",
      date: "August 30, 2023",
      author: {
        name: "Alexander Kaminski",
        role: "Data analysis",
        avatar: "https://themes.easital.com/html/liston/v2.3/assets/images/avatar/02.jpg"
      }
    },
    {
      id: 3,
      image: "https://themes.easital.com/html/liston/v2.3/assets/images/blog/03-lg.jpg",
      category: "Events",
      title: "Duis volutpat ipsum eget pretium posuere.",
      date: "Jun 28, 2023",
      author: {
        name: "Edwin Martins",
        role: "Security Engineer",
        avatar: "https://themes.easital.com/html/liston/v2.3/assets/images/avatar/03.jpg"
      }
    },
    {
      id: 4,
      image: "https://themes.easital.com/html/liston/v2.3/assets/images/blog/04-lg.jpg",
      category: "Events",
      title: "In ut tellus id nisl convallis bibendum eu nec diam.",
      date: "Jul 28, 2023",
      author: {
        name: "Pranoti Deshpande",
        role: "Product Manager",
        avatar: "https://themes.easital.com/html/liston/v2.3/assets/images/avatar/04.jpg"
      }
    },
    {
      id: 5,
      image: "https://themes.easital.com/html/liston/v2.3/assets/images/blog/05-lg.jpg",
      category: "Events",
      title: "Vestibulum scelerisque urna ut velit auctor varius.",
      date: "Oct 24, 2023",
      author: {
        name: "Gabriel North",
        role: "DevOps",
        avatar: "https://themes.easital.com/html/liston/v2.3/assets/images/avatar/05.jpg"
      }
    }
  ];

  return (
    <section className="py-20 relative overflow-hidden bg-white">
      <div className="max-w-7xl mx-auto px-4 py-4">
        <div className="flex justify-center">
          <div className="w-full max-w-4xl text-center mb-12">
            {/* Section Header */}
            <div className="inline-block font-caveat text-5xl font-medium text-primary mb-4 capitalize">
              Our Latest Articles
            </div>
            <h2 className="text-4xl md:text-5xl font-semibold mb-6 capitalize">
              Discover Our Latest News And Articles
            </h2>
            <p className="text-lg text-gray-600">
              Discover exciting categories. <span className="text-primary font-semibold">Find what you're looking for.</span>
            </p>
          </div>
        </div>

        {/* Blog Carousel/Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 overflow-x-auto">
          {articles.map((article) => (
            <Card key={article.id} className="h-full overflow-hidden group cursor-pointer hover:shadow-lg transition-all duration-300">
              {/* Image with bookmark */}
              <div className="relative overflow-hidden">
                <img 
                  src={article.image} 
                  alt={article.title}
                  className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <button className="absolute top-3 right-3 w-10 h-10 bg-white rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors z-10">
                  <Bookmark className="w-4 h-4" />
                </button>
                <a href="/blog" className="absolute inset-0 z-5" aria-label="Read more"></a>
              </div>

              {/* Card Body */}
              <CardContent className="p-6">
                {/* Meta information */}
                <div className="flex items-center gap-3 mb-3">
                  <span className="text-sm text-gray-500">{article.date}</span>
                  <span className="text-gray-300">|</span>
                  <a 
                    href="/blog" 
                    className="inline-block px-3 py-1 text-sm font-semibold text-primary bg-white border border-gray-200 rounded hover:bg-primary hover:text-white transition-colors"
                  >
                    {article.category}
                  </a>
                </div>

                {/* Title */}
                <h3 className="text-lg font-semibold mb-0 line-clamp-2">
                  <a href="/blog" className="hover:text-primary transition-colors">
                    {article.title}
                  </a>
                </h3>
              </CardContent>

              {/* Card Footer */}
              <CardFooter className="py-4 px-6 border-t border-gray-100">
                <div className="flex items-center w-full">
                  <div className="flex-shrink-0">
                    <img 
                      src={article.author.avatar} 
                      alt={article.author.name}
                      className="w-12 h-12 rounded-full object-cover"
                    />
                  </div>
                  <div className="ml-3 flex-grow">
                    <a href="/author" className="block">
                      <span className="text-gray-500 italic text-sm">By</span>{" "}
                      <span className="font-medium text-gray-900 hover:text-primary transition-colors">
                        {article.author.name}
                      </span>
                    </a>
                    <div className="text-sm text-gray-500">{article.author.role}</div>
                  </div>
                </div>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export default BlogSection;