105 lines
4.3 KiB
TypeScript
105 lines
4.3 KiB
TypeScript
import React from 'react';
|
|
import { Play, Info, AlertTriangle } from 'lucide-react';
|
|
import { Course } from '../types';
|
|
|
|
interface HeroBannerProps {
|
|
course: (Course & { progress?: number; totalLessons?: number }) | null;
|
|
onPlay: (courseId: string) => void;
|
|
subscriptionStatus: string;
|
|
setView: (view: string) => void;
|
|
}
|
|
|
|
export default function HeroBanner({ course, onPlay, subscriptionStatus, setView }: HeroBannerProps) {
|
|
if (!course) {
|
|
return (
|
|
<div className="h-[30vh] md:h-[45vh] w-full bg-zinc-900 flex items-center justify-center text-zinc-500 rounded-lg border border-zinc-800">
|
|
Nenhum curso em destaque disponível.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const isBlocked = subscriptionStatus === 'OVERDUE' || subscriptionStatus === 'CANCELED';
|
|
|
|
return (
|
|
<div className="relative w-full h-[55vh] md:h-[65vh] flex items-end overflow-hidden rounded-2xl border border-white/10 shadow-[0_12px_40px_rgba(0,0,0,0.5)]">
|
|
{/* Background Image / Gradient */}
|
|
<div className="absolute inset-0 z-0">
|
|
<img
|
|
src={course.thumbnail}
|
|
alt={course.title}
|
|
className="w-full h-full object-cover brightness-[0.40] scale-105 transition-all duration-700"
|
|
referrerPolicy="no-referrer"
|
|
/>
|
|
{/* Gradients */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#141414] via-transparent to-transparent" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-[#141414]/90 via-[#141414]/30 to-transparent" />
|
|
</div>
|
|
|
|
{/* Content Container */}
|
|
<div className="relative z-10 p-6 md:p-12 max-w-2xl space-y-4">
|
|
{/* Category Tag */}
|
|
<span className="glass-badge bg-[#E50914]/85 text-white px-3 py-1 rounded-md text-xs font-bold uppercase tracking-wider">
|
|
{course.category}
|
|
</span>
|
|
|
|
{/* Title */}
|
|
<h1 className="text-3xl md:text-5xl font-display font-black tracking-tight text-white leading-tight">
|
|
{course.title}
|
|
</h1>
|
|
|
|
{/* Description */}
|
|
<p className="text-sm md:text-base text-zinc-300 font-normal leading-relaxed line-clamp-3">
|
|
{course.description}
|
|
</p>
|
|
|
|
{/* Progress Bar (If started) */}
|
|
{course.progress !== undefined && course.progress > 0 && (
|
|
<div className="space-y-1">
|
|
<div className="flex justify-between items-center text-xs text-zinc-400 font-semibold">
|
|
<span>Seu Progresso</span>
|
|
<span>{course.progress}% concluído</span>
|
|
</div>
|
|
<div className="w-full bg-white/10 backdrop-blur-sm h-2 rounded-full overflow-hidden">
|
|
<div
|
|
className="bg-[#E50914] h-full rounded-full transition-all duration-500 shadow-[0_0_10px_rgba(229,9,20,0.5)]"
|
|
style={{ width: `${course.progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Buttons */}
|
|
<div className="flex flex-wrap items-center gap-3 pt-2">
|
|
{isBlocked ? (
|
|
<button
|
|
onClick={() => setView('subscription')}
|
|
className="glass-btn-secondary border border-red-500/30 hover:bg-red-950/20 text-red-400 font-bold px-6 py-2.5 rounded-lg flex items-center space-x-2 transition-all cursor-pointer"
|
|
>
|
|
<AlertTriangle className="w-5 h-5 fill-red-500/10 text-red-500" />
|
|
<span>Assinatura Suspensa - Regularizar</span>
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={() => onPlay(course.id)}
|
|
className="bg-white hover:bg-zinc-200 text-black font-bold px-6 py-2.5 rounded-lg flex items-center space-x-2 transition-all shadow-lg hover:scale-[1.02] cursor-pointer"
|
|
>
|
|
<Play className="w-5 h-5 fill-black text-black" />
|
|
<span>
|
|
{course.progress && course.progress > 0 ? 'Continuar Assistindo' : 'Iniciar Treinamento'}
|
|
</span>
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => onPlay(course.id)}
|
|
className="glass-btn-secondary text-white font-medium px-5 py-2.5 rounded-lg flex items-center space-x-2 cursor-pointer"
|
|
>
|
|
<Info className="w-5 h-5 text-zinc-300" />
|
|
<span>Ver Detalhes</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|