import { AlertTriangle, Sparkles } from 'lucide-react';

import { StatePanel } from '@/components/ui/state-panel';
import type { Strategy } from '@/shared/types/app';

interface ClassroomSupportTryTodayProps {
  readonly strategy: Strategy | null;
  readonly isLoading: boolean;
  readonly error: unknown;
}

export function ClassroomSupportTryToday({
  strategy,
  isLoading,
  error,
}: ClassroomSupportTryTodayProps) {
  return (
    <div className="relative overflow-hidden bg-gradient-to-r from-emerald-500/10 via-teal-500/10 to-emerald-500/5 rounded-2xl border border-emerald-500/20 p-5 flex gap-4 items-start">
      <div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-bl from-emerald-400/5 to-transparent rounded-bl-full" />
      <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center flex-shrink-0 shadow-lg shadow-emerald-500/30">
        <Sparkles size={22} className="text-white" />
      </div>
      <div className="relative flex-1">
        <h3 className="font-bold text-emerald-400 flex items-center gap-2">
          Try This Today
        </h3>
        {isLoading ? (
          <StatePanel tone="cyan" alignment="start" loading className="border-0 bg-transparent p-0 mt-1">
            Loading strategies...
          </StatePanel>
        ) : error ? (
          <p className="text-sm text-red-300 mt-1 flex items-center gap-2">
            <AlertTriangle size={14} />
            Strategies could not be loaded.
          </p>
        ) : strategy ? (
          <>
            <p className="font-semibold text-sm text-white mt-1">{strategy.title}</p>
            <p className="text-sm text-slate-400 mt-0.5">{strategy.description}</p>
          </>
        ) : (
          <p className="text-sm text-slate-400 mt-1">No strategies are available yet.</p>
        )}
      </div>
    </div>
  );
}
