import { CheckCircle, Loader2, Save, Sparkles } from 'lucide-react';
import type { PersonalityQuizWorkflow } from '@/components/personality-quiz/types';

interface PersonalityResultHeaderProps {
  readonly workflow: PersonalityQuizWorkflow;
  readonly savedDate?: string | null;
  readonly isSaving: boolean;
}

export function PersonalityResultHeader({
  workflow,
  savedDate,
  isSaving,
}: PersonalityResultHeaderProps) {
  const result = workflow.result;
  if (!result) return null;

  return (
    <div className={`bg-gradient-to-r ${result.color} p-6 text-center relative overflow-hidden`}>
      <div className="absolute inset-0 bg-black/30" />
      <div className="relative z-10">
        {workflow.showSavedResult && (
          <div className="inline-flex items-center gap-1.5 bg-white/15 backdrop-blur-sm rounded-full px-3 py-1 mb-2">
            <CheckCircle size={12} className="text-emerald-300" />
            <span className="text-[10px] font-medium text-white/90">
              Saved Result {savedDate ? `- ${workflow.formatSavedDate(savedDate)}` : ''}
            </span>
          </div>
        )}
        {isSaving && (
          <div className="inline-flex items-center gap-1.5 bg-white/15 backdrop-blur-sm rounded-full px-3 py-1 mb-2">
            <Loader2 size={12} className="text-white animate-spin" />
            <span className="text-[10px] font-medium text-white/90">Saving to your profile...</span>
          </div>
        )}
        {!workflow.showSavedResult && !isSaving && (
          <div className="inline-flex items-center gap-1.5 bg-emerald-500/30 backdrop-blur-sm rounded-full px-3 py-1 mb-2">
            <Save size={12} className="text-emerald-300" />
            <span className="text-[10px] font-medium text-white/90">Result saved to your profile</span>
          </div>
        )}
        <div className="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm rounded-full px-4 py-1.5 mb-3">
          <Sparkles size={14} className="text-white" />
          <span className="text-xs font-semibold text-white">Your Personality Type</span>
        </div>
        <h2 className="text-4xl font-black text-white tracking-wider mb-1">{result.code}</h2>
        <h3 className="text-lg font-semibold text-white/90">{result.name}</h3>
        <p className="text-sm text-white/70 mt-1">{result.nickname}</p>
      </div>
    </div>
  );
}
