'use client';

import React from 'react';
import Link from 'next/link';
import { HandRaisedIcon } from '@heroicons/react/24/outline';
import { cn } from '@/utils/cn';

interface WelcomeCardProps {
  userName?: string;
  coursesCount?: number;
  hoursStudied?: number;
  className?: string;
}

export function WelcomeCard({ 
  userName = 'John', 
  coursesCount = 3, 
  hoursStudied = 2,
  className 
}: WelcomeCardProps) {
  return (
    <div className={cn(
      'relative overflow-hidden rounded-xl bg-gradient-to-r from-green-600 via-green-700 to-emerald-600 p-6 text-white shadow-lg',
      className
    )}>
      {/* Background decoration */}
      <div className="absolute inset-0 bg-gradient-primary opacity-90" />
      <div className="absolute -right-4 -top-4 h-24 w-24 rounded-full bg-white/10" />
      <div className="absolute -bottom-6 -left-6 h-32 w-32 rounded-full bg-white/5" />
      
      {/* Content */}
      <div className="relative z-10">
        <div className="flex items-center justify-between">
          <div className="flex-1">
            <div className="flex items-center space-x-2 mb-2">
              <HandRaisedIcon className="h-6 w-6 text-yellow-300" />
              <h2 className="text-xl font-bold">
                Selamat Datang Kembali, {userName}!
              </h2>
            </div>
            <p className="text-green-100 text-sm leading-relaxed">
              Anda memiliki <span className="font-semibold text-white">{coursesCount} kursus aktif</span> dan <span className="font-semibold text-white">{hoursStudied} topik yang perlu diselesaikan hari ini</span>.
            </p>
          </div>
          
          {/* Illustration/Icon */}
          <div className="hidden sm:block ml-6">
            <div className="relative">
              <div className="h-16 w-16 rounded-full bg-white/20 flex items-center justify-center backdrop-blur-sm">
                <div className="h-12 w-12 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center">
                  <span className="text-white font-bold text-lg">📚</span>
                </div>
              </div>
              <div className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-green-400 border-2 border-white animate-pulse" />
            </div>
          </div>
        </div>
        
        {/* Action buttons */}
        <div className="mt-6 flex flex-wrap gap-3">
          <Link 
            href="/courses" 
            className="inline-flex items-center px-4 py-2 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-lg text-sm font-medium transition-colors duration-200"
          >
            <span>Lanjutkan Belajar</span>
            <svg className="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </Link>
          <Link 
            href="/jadwal" 
            className="inline-flex items-center px-4 py-2 bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-lg text-sm font-medium transition-colors duration-200"
          >
            Lihat Jadwal
          </Link>
        </div>
      </div>
    </div>
  );
}

export default WelcomeCard;