"use client"

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

export function Updates() {
  // Show only latest 3 updates
  const latestUpdates = blogs.slice(0, 3);

  return (
    <section id="updates" className="py-20 bg-background/50 backdrop-blur-sm">
      <div className="container px-4">
        <SectionHeader 
          title="Latest Updates" 
          subtitle="Stay informed with the latest news and announcements."
        />

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {latestUpdates.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 bg-card/60">
                <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>
                  <h3 className="text-xl font-bold flex-1 line-clamp-2">{item.title}</h3>
                  <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 className="text-center mt-12">
            <Link href="/blogs" className="inline-flex items-center justify-center h-10 px-6 rounded-full border hover:bg-muted transition-colors">
                View All Updates
            </Link>
        </div>
      </div>
    </section>
  );
}