import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import Link from "next/link";

const posts = [
  {
    title: "L'avenir de l'IA en entreprise",
    description: "Comment l'intelligence artificielle transforme les processus métier en 2026.",
    date: "12 Mars 2026",
    slug: "avenir-ia-entreprise",
  },
  {
    title: "Optimiser sa productivité digitale",
    description: "Les meilleurs outils et méthodes pour rester efficace dans un monde connecté.",
    date: "5 Mars 2026",
    slug: "optimiser-productivite-digitale",
  },
  {
    title: "Sécurité des données : les enjeux",
    description: "Pourquoi la protection des données est devenue la priorité numéro 1.",
    date: "28 Février 2026",
    slug: "securite-donnees-enjeux",
  },
];

export default function BlogPage() {
  return (
    <div className="py-24">
      <Container>
        <div className="text-center mb-16">
          <Heading>Notre Blog</Heading>
          <Subheading className="mt-4">Actualités, conseils et analyses sur le monde digital.</Subheading>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {posts.map((post) => (
            <Link href={`/blog/${post.slug}`} key={post.slug}>
              <Card className="h-full hover:shadow-lg transition-shadow cursor-pointer">
                <CardHeader>
                  <p className="text-sm text-neutral-500 mb-2">{post.date}</p>
                  <CardTitle>{post.title}</CardTitle>
                  <CardDescription className="mt-2">{post.description}</CardDescription>
                </CardHeader>
              </Card>
            </Link>
          ))}
        </div>
      </Container>
    </div>
  );
}