"use client"

import blogs from "@/data/blogs.json";
import { Card, CardContent } from "@/components/ui/card";
import { ArrowRight, Calendar } from "lucide-react";
import { motion } from "framer-motion";
import Link from "next/link";

export default function BlogsClient() {
  return (
    <div className="pt-20">
      <section className="py-16">
        <div className="container px-4">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-4">Railway Updates & Stories</h1>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Latest news, schedule changes, and stories from Rajbari&apos;s railway tracks.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {blogs.map((item, index) => (
              <motion.div
                key={item.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                viewport={{ once: true }}
              >
                <Card className="overflow-hidden h-full flex flex-col hover:shadow-lg transition-shadow border-primary/20">
                  <div className="aspect-video w-full bg-muted relative overflow-hidden">
                    {item.image ? (
                      <img
                        src={item.image}
                        alt={item.title}
                        className="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
                      />
                    ) : (
                      <div className="w-full h-full flex items-center justify-center bg-secondary/30 text-muted-foreground">
                        <span className="text-4xl">📰</span>
                      </div>
                    )}
                  </div>
                  <CardContent className="flex-1 flex flex-col p-6 space-y-4">
                    <div className="flex items-center gap-2 text-sm text-muted-foreground font-medium">
                      <Calendar size={14} />
                      {item.date}
                    </div>
                    <h2 className="text-xl font-bold flex-1 line-clamp-2">
                      {item.title}
                    </h2>
                    <p className="text-muted-foreground line-clamp-3 text-sm">
                      {item.excerpt}
                    </p>
                    <Link
                      href={`/blog/${item.slug}`}
                      className="inline-flex items-center text-primary font-medium hover:underline mt-4"
                    >
                      Read More <ArrowRight className="ml-2 h-4 w-4" />
                    </Link>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}
