import { useMemo } from 'react';
import { Sparkles } from 'lucide-react';

import type { FrameEntryViewModel } from '@/business/frame/types';
import { HERO_IMAGE } from '@/shared/constants/appData';

function getCurrentWeekMonday(): string {
  const today = new Date();
  const dayOfWeek = today.getDay();
  const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
  const monday = new Date(today);
  monday.setDate(today.getDate() + mondayOffset);
  return monday.toLocaleDateString('en-US', {
    month: 'long',
    day: 'numeric',
    year: 'numeric',
  });
}

interface DashboardHeroProps {
  readonly greeting: string;
  readonly userName: string;
  readonly latestFrame: FrameEntryViewModel | null;
}

export function DashboardHero({
  greeting,
  userName,
}: DashboardHeroProps) {
  const currentWeekMonday = useMemo(() => getCurrentWeekMonday(), []);
  return (
    <section className="relative overflow-hidden rounded-2xl h-52 md:h-60">
      <img src={HERO_IMAGE} alt="Classroom" className="w-full h-full object-cover" />
      <div className="absolute inset-0 bg-gradient-to-r from-slate-900/90 via-violet-900/70 to-amber-900/50" />
      <div className="absolute inset-0 flex items-center px-6 md:px-8">
        <div className="relative z-10">
          <div className="flex items-center gap-2 mb-2">
            <Sparkles size={18} className="text-amber-400" />
            <span className="text-amber-400 text-sm font-medium">
              Week of {currentWeekMonday}
            </span>
          </div>
          <h1 className="text-2xl md:text-4xl font-bold text-white mb-1">
            {greeting}, {userName}!
          </h1>
          <p className="text-slate-300 text-sm md:text-base max-w-xl">
            Welcome to FRAMEworks. Your campus operations hub for today.
          </p>
        </div>
      </div>
    </section>
  );
}
