import { ArrowLeft, BookOpen } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { ModuleHeader } from '@/components/ui/module-header';

interface PersonalityDirectoryHeaderProps {
  readonly description: string;
  readonly onBackToQuiz: () => void;
}

export function PersonalityDirectoryHeader({
  description,
  onBackToQuiz,
}: PersonalityDirectoryHeaderProps) {
  return (
    <div className="flex items-center justify-between">
      <div>
        <Button
          type="button"
          onClick={onBackToQuiz}
          leadingIcon={<ArrowLeft size={14} />}
          className="h-auto bg-transparent hover:bg-transparent p-0 flex items-center gap-1.5 text-sm text-violet-400 hover:text-violet-300 transition-colors mb-2"
        >
          Back to Quiz
        </Button>
        <ModuleHeader
          title="Personality Type Directory"
          description={description}
          icon={BookOpen}
          iconClassName="bg-transparent"
          titleClassName="text-lg text-white gap-2"
          descriptionClassName="text-xs text-slate-400 mt-0.5"
          className="space-y-0"
        />
      </div>
    </div>
  );
}
