'use client';

import Link from 'next/link';
import { VideoLesson } from '@/lib/data';
import { Download, Eye, FileCode2, Clock, ArrowRight, Sparkles } from 'lucide-react';
import { YoutubeIcon as Youtube } from '@/components/icons/YoutubeIcon';

interface ResourceCardProps {
  lesson: VideoLesson;
  locale: string;
}

export function ResourceCard({ lesson, locale }: ResourceCardProps) {
  return (
    <div className="group relative bg-slate-900/60 hover:bg-slate-900 border border-slate-800 hover:border-slate-700/80 rounded-2xl overflow-hidden transition-all duration-300 flex flex-col justify-between shadow-xl hover:shadow-2xl hover:shadow-red-500/5 hover:-translate-y-1">
      
      <div>
        {/* Thumbnail Container */}
        <div className="relative aspect-video w-full overflow-hidden bg-slate-950">
          <img
            src={lesson.thumbnailUrl}
            alt={lesson.title}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent opacity-80" />

          {/* Featured Badge */}
          {lesson.isFeatured && (
            <div className="absolute top-3 left-3 flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-red-600/90 text-white text-[11px] font-bold shadow-lg backdrop-blur-md">
              <Sparkles className="w-3 h-3" />
              <span>FEATURED TUTORIAL</span>
            </div>
          )}

          {/* Category Tag */}
          <div className="absolute top-3 right-3 px-2.5 py-1 rounded-full bg-slate-900/90 border border-slate-700/80 text-slate-200 text-[11px] font-semibold backdrop-blur-md">
            {lesson.category}
          </div>

          {/* Duration Badge */}
          <div className="absolute bottom-3 right-3 flex items-center gap-1 px-2 py-0.5 rounded bg-slate-950/90 text-slate-300 text-[11px] font-mono border border-slate-800">
            <Clock className="w-3 h-3 text-red-400" />
            <span>{lesson.duration}</span>
          </div>
        </div>

        {/* Card Body */}
        <div className="p-5 space-y-3">
          
          {/* Tags */}
          <div className="flex flex-wrap gap-1.5">
            {lesson.tags.slice(0, 3).map((tag) => (
              <span
                key={tag}
                className="text-[10px] font-medium px-2 py-0.5 rounded bg-slate-800/60 text-slate-400 border border-slate-800"
              >
                #{tag}
              </span>
            ))}
          </div>

          {/* Title */}
          <h3 className="font-bold text-base text-white group-hover:text-red-400 transition-colors line-clamp-2 leading-snug">
            <Link href={`/${locale}/lessons/${lesson.slug}`}>
              {lesson.title}
            </Link>
          </h3>

          {/* Summary */}
          <p className="text-xs text-slate-400 line-clamp-2 leading-relaxed">
            {lesson.summary}
          </p>

          {/* Stats Bar */}
          <div className="pt-2 flex items-center justify-between text-[11px] text-slate-400 border-t border-slate-800/60">
            <span className="flex items-center gap-1">
              <FileCode2 className="w-3.5 h-3.5 text-red-400" />
              <span>{lesson.codeSnippets.length} Code Files</span>
            </span>

            <span className="flex items-center gap-1">
              <Download className="w-3.5 h-3.5 text-emerald-400" />
              <span>{lesson.downloadCount.toLocaleString()} Downloads</span>
            </span>

            <span className="flex items-center gap-1">
              <Eye className="w-3.5 h-3.5 text-sky-400" />
              <span>{lesson.viewsCount.toLocaleString()} Views</span>
            </span>
          </div>

        </div>
      </div>

      {/* Card Action Footer */}
      <div className="px-5 pb-5 pt-1">
        <Link
          href={`/${locale}/lessons/${lesson.slug}`}
          className="w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl bg-slate-800 hover:bg-red-600 text-slate-200 hover:text-white text-xs font-bold transition-all group-hover:shadow-lg group-hover:shadow-red-600/20"
        >
          <span>View Code & Notes</span>
          <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
        </Link>
      </div>

    </div>
  );
}