import { ChevronRight } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
} from "@/components/ui/card";
import { BLOG_SITES } from "@/blog-sites.js";

const features = BLOG_SITES.map((site) => ({
  title: site.title,
  description: site.description,
  href: site.url,
}));

export default function AllBlogs() {
  return (
    <section id="ai-chatbot" className="relative py-16 md:py-28 lg:py-32">
      <div className="container max-w-5xl">
        <div className="text-center">
          <h3 className="mini-title">CURRENTLY ACTIVE BLOGS</h3>
        </div>

        <div className="mt-8 grid grid-cols-1 gap-2.5 sm:grid-cols-2 md:mt-12 lg:mt-20 lg:grid-cols-3 lg:gap-6">
          {features.map((feature, index) => (
            <Card key={index} className="flex flex-col">
              <CardHeader className="max-md:p-3">
                <h3 className="text-lg font-semibold">{feature.title}</h3>
                <CardDescription className="text-foreground mt-4 font-medium">
                  {feature.description}
                </CardDescription>
              </CardHeader>
              <CardContent className="mt-auto max-md:p-3">
                <Button
                  variant="outline"
                  asChild
                  className="border-border group w-[min(100%,300px)]"
                >
                  <a href={feature.href}>
                    Read On
                    <span className="sr-only">
                      {" "}
                      about {feature.description.toLowerCase()}
                    </span>
                    <ChevronRight className="ml-1 size-4 transition-transform group-hover:translate-x-0.5" />
                  </a>
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}