import { Sparkles } from 'lucide-react';

import type { EmotionalIntelligencePageState } from '@/components/emotional-intelligence/types';

type WeeklyFocusBannerProps = {
  readonly state: EmotionalIntelligencePageState;
};

export function WeeklyFocusBanner({ state }: WeeklyFocusBannerProps) {
  if (state.contentLoading || state.contentError || !state.weeklyFocus) {
    return null;
  }

  return (
    <div className="bg-gradient-to-r from-pink-500/10 to-violet-500/10 rounded-2xl border border-pink-500/20 p-5">
      <h3 className="font-bold text-pink-400 mb-1 flex items-center gap-2">
        <Sparkles size={16} /> This Week&apos;s EI Focus: {state.weeklyFocus.title}
      </h3>
      <p className="text-sm text-slate-300">{state.weeklyFocus.description}</p>
    </div>
  );
}
