import { Eye, Save } from 'lucide-react';

import type { EmotionalIntelligencePageActions } from '@/components/emotional-intelligence/types';
import { getPersonalityType } from '@/shared/constants/personalityCatalog';
import type { PersonalityType } from '@/shared/constants/personalityCatalog';

type SavedPersonalityBannerProps = {
  personalityResult: string;
  personalityTypes: readonly PersonalityType[];
  actions: EmotionalIntelligencePageActions;
};

export function SavedPersonalityBanner({ personalityResult, personalityTypes, actions }: SavedPersonalityBannerProps) {
  const personalityType = getPersonalityType(personalityResult, personalityTypes);

  return (
    <div className="bg-gradient-to-r from-violet-500/10 to-indigo-500/10 rounded-2xl border border-violet-500/20 p-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${personalityType?.color || 'from-violet-500 to-indigo-600'} flex items-center justify-center shadow-lg`}>
            <span className="text-sm font-black text-white tracking-wider">{personalityResult}</span>
          </div>
          <div>
            <div className="flex items-center gap-2">
              <h3 className="font-bold text-white text-sm">Your Personality Type: {personalityResult}</h3>
              <span className="text-[10px] bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 px-2 py-0.5 rounded-full flex items-center gap-1">
                <Save size={8} /> Saved
              </span>
            </div>
            <p className="text-xs text-slate-400">
              {personalityType?.name} - {personalityType?.nickname}
            </p>
          </div>
        </div>
        <button
          type="button"
          onClick={() => actions.setActiveTab('personality')}
          className="px-3 py-1.5 bg-violet-500/15 text-violet-400 rounded-lg text-xs font-medium hover:bg-violet-500/25 border border-violet-500/20 transition-all flex items-center gap-1.5"
        >
          <Eye size={12} /> View Details
        </button>
      </div>
    </div>
  );
}
