WSW/src/components/AnimatedRow.tsx

'use client';

import { motion } from 'framer-motion';

export default function AnimatedRow({
  drop,
  index,
  prefix,
  isVip = false,
}: {
  drop: any;
  index: number;
  prefix: string;
  isVip?: boolean;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{
        duration: 0.4,
        delay: index * 0.05,
        ease: [0.22, 1, 0.36, 1],
      }}
      className="grid grid-cols-1 md:grid-cols-12 gap-2 md:gap-4 px-6 md:px-8 py-5 border-b border-zinc-900/50 hover:bg-white/[0.02] transition-all duration-300 font-mono text-[10px] tracking-widest group items-center relative overflow-hidden"
    >
      <div className="col-span-1 md:col-span-3 flex md:contents justify-between text-zinc-600">
        <div className="md:col-span-2 group-hover:text-zinc-400 transition-colors font-mono tabular-nums">
          {new Date(drop.published_at).toLocaleDateString('en-GB', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
          })}
        </div>
        <div className="md:col-span-1 text-zinc-700 group-hover:text-zinc-500 transition-colors">
          {prefix}{drop.id.toString().padStart(3, '0')}
        </div>
      </div>

      <div className="col-span-1 md:col-span-4 text-white font-black tracking-tighter uppercase text-xs italic group-hover:pl-2 transition-all duration-300">
        {drop.title}
      </div>

      <div className="col-span-1 md:col-span-5 flex md:contents justify-between items-center text-[9px] tracking-[0.2em]">
        <div className="md:col-span-2 text-zinc-500 group-hover:text-zinc-300 transition-colors flex items-center gap-2">
          {drop.file_url ? (
            <>
              <span className="w-1 h-1 bg-green-500 rounded-full shadow-[0_0_5px_rgba(34,197,94,0.5)]" />
              AVAILABLE
            </>
          ) : (
            <>
              <span className="w-1 h-1 bg-zinc-800 rounded-full" />
              N/A
            </>
          )}
        </div>

        <div
          className={`md:col-span-2 ${
            drop.status === 'checked'
              ? 'text-white'
              : 'text-zinc-600 animate-pulse'
          } transition-all duration-300`}
        >
          {drop.status === 'checked' ? '• SECURE' : '• UNVERIFIED'}
        </div>

        <div className="md:col-span-1 text-right">
          {drop.file_url && (
            isVip ? (
              <a
                href={drop.file_url}
                target="_blank"
                rel="noopener noreferrer"
                className="bg-white text-black px-3 py-1.5 font-black text-[9px] tracking-widest hover:bg-zinc-200 transition-colors"
              >
                FETCH
              </a>
            ) : (
              <span className="text-zinc-800 border border-zinc-900 px-3 py-1.5 cursor-not-allowed">
                LOCKED
              </span>
            )
          )}
        </div>
      </div>
    </motion.div>
  );
}