import { MessageSquare, Target, Users } from 'lucide-react';
import type { PersonalityQuizResultTab } from '@/business/personality/types';
import type { PersonalityQuizWorkflow } from '@/components/personality-quiz/types';

interface PersonalityResultTabsProps {
  readonly workflow: PersonalityQuizWorkflow;
}

const RESULT_TABS: readonly {
  readonly id: PersonalityQuizResultTab;
  readonly label: string;
  readonly icon: 'target' | 'users' | 'message';
}[] = [
  { id: 'overview', label: 'Overview', icon: 'target' },
  { id: 'relationships', label: 'Work Relationships', icon: 'users' },
  { id: 'language', label: 'Workplace Language', icon: 'message' },
];

function ResultTabIcon({ icon }: { readonly icon: 'target' | 'users' | 'message' }) {
  if (icon === 'target') return <Target size={14} />;
  if (icon === 'users') return <Users size={14} />;
  return <MessageSquare size={14} />;
}

export function PersonalityResultTabs({ workflow }: PersonalityResultTabsProps) {
  return (
    <div className="border-b border-slate-700/40">
      <div className="flex">
        {RESULT_TABS.map((tab) => (
          <button
            key={tab.id}
            type="button"
            onClick={() => workflow.setActiveResultTab(tab.id)}
            className={`flex-1 py-3 px-4 text-xs font-medium flex items-center justify-center gap-1.5 transition-all border-b-2 ${
              workflow.activeResultTab === tab.id
                ? 'text-violet-400 border-violet-400 bg-violet-500/5'
                : 'text-slate-500 border-transparent hover:text-slate-300'
            }`}
          >
            <ResultTabIcon icon={tab.icon} /> {tab.label}
          </button>
        ))}
      </div>
    </div>
  );
}
