"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { useTranslation } from "@/lib/i18n/context";
import { SectionHeading } from "@/components/ui/section-heading";
import { Calendar, User, ArrowRight } from "lucide-react";

import { blogPosts } from "@/lib/data/blog";

export default function BlogPage() {
  const { t, locale, dir } = useTranslation();

  return (
    <div className="pt-20 min-h-screen bg-light-gray/20">
      <section className="section-padding" dir={dir}>
        <div className="max-w-7xl mx-auto">
          <SectionHeading
            tag={t.blog.sectionTag}
            title={t.blog.title}
            subtitle={t.blog.subtitle}
          />

          <div className="flex flex-wrap justify-center gap-2 mb-12">
            {t.blog.categories.map((cat: string) => (
              <button
                key={cat}
                className="px-5 py-2 rounded-full bg-white border border-primary/10 text-sm font-semibold text-dark-text/70 hover:bg-primary hover:text-white transition-all shadow-sm"
              >
                {cat}
              </button>
            ))}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {blogPosts.map((post, i) => (
              <motion.article
                key={post.id}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.1 }}
                className="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-primary/5 group"
              >
                <div className="relative h-48 overflow-hidden">
                  <Image
                    src={post.image}
                    alt={post.title[locale as keyof typeof post.title]}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute top-4 left-4 bg-primary text-white text-xs font-bold px-3 py-1.5 rounded-full">
                    {post.category}
                  </div>
                </div>

                <div className="p-6">
                  <div className="flex items-center gap-4 text-xs text-dark-text/40 mb-3">
                    <span className="flex items-center gap-1">
                      <Calendar size={12} />
                      {post.date}
                    </span>
                    <span className="flex items-center gap-1">
                      <User size={12} />
                      {post.author}
                    </span>
                  </div>

                  <h3 className="text-xl font-bold text-dark-text mb-3 line-clamp-2">
                    {post.title[locale as keyof typeof post.title]}
                  </h3>
                  
                  <p className="text-sm text-dark-text/60 leading-relaxed mb-6 line-clamp-3">
                    {post.excerpt[locale as keyof typeof post.excerpt]}
                  </p>

                  <Link
                    href={`/blog/${post.slug}`}
                    className="inline-flex items-center gap-2 text-sm font-bold text-primary hover:gap-3 transition-all"
                  >
                    {t.blog.readMore}
                    <ArrowRight size={16} />
                  </Link>
                </div>
              </motion.article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}