'use client';

import { CONTENTS, statusColor, statusLabel } from '@/lib/mock-data';
import { motion } from 'framer-motion';
import { ArrowRight, ChevronRight } from 'lucide-react';
import Link from 'next/link';

export function RecentContents() {
  const recent = CONTENTS.slice(0, 6);

  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut', delay: 0.25 }}
      className="bg-bg-card border border-border rounded-2xl flex flex-col"
    >
      <div className="px-5 py-4 border-b border-border">
        <h2 className="text-[14px] font-semibold tracking-tight">Contenus récents</h2>
      </div>

      <div className="flex-1 divide-y divide-border">
        {recent.map((content) => (
          <div
            key={content.id}
            className="group px-5 py-3.5 flex items-center gap-3 hover:bg-bg-card-hover transition-colors cursor-pointer"
          >
            <div className="flex-1 min-w-0">
              <p className="text-[13px] font-medium truncate">{content.title}</p>
              <p className="text-[11px] text-text-dim truncate mt-0.5">{content.keyword}</p>
            </div>

            {/* Badge statut */}
            <span
              className={`flex-shrink-0 px-2 py-0.5 rounded-full text-[11px] font-medium border ${statusColor(content.status)}`}
            >
              {statusLabel(content.status)}
            </span>

            {/* Score SEO mini bar */}
            <div className="hidden sm:flex flex-col items-end gap-1 flex-shrink-0 w-16">
              <span className="text-[11px] font-mono text-text-dim">{content.seoScore}</span>
              <div className="w-full h-1 bg-bg rounded-full overflow-hidden">
                <div
                  className="h-full rounded-full bg-gradient-to-r from-accent to-cyan-400"
                  style={{ width: `${content.seoScore}%` }}
                />
              </div>
            </div>

            <ChevronRight className="w-4 h-4 text-text-dimmer opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" />
          </div>
        ))}
      </div>

      <div className="px-5 py-3 border-t border-border">
        <Link
          href="/contenus"
          className="flex items-center gap-1.5 text-[12px] text-text-dim hover:text-accent-light transition-colors"
        >
          Voir tous les contenus
          <ArrowRight className="w-3.5 h-3.5" />
        </Link>
      </div>
    </motion.div>
  );
}