import React from 'react';
import { PhoneOff, Flag } from 'lucide-react';
import { Button } from '../ui/button';

interface VoiceHeaderProps {
  title: string;
  onExit: () => void;
  onFinish: () => void;
}

const VoiceHeader: React.FC<VoiceHeaderProps> = ({ title, onExit, onFinish }) => (
  <div className="p-8 flex justify-between items-center relative z-10">
    <div className="flex items-center gap-4">
      <Button
        variant="ghost"
        size="icon"
        onClick={onExit}
        className="h-12 w-12 bg-white/5 hover:bg-white/10 rounded-2xl text-white/50 hover:text-white transition-all"
      >
        <PhoneOff size={20} />
      </Button>
      <div>
        <h2 className="text-white font-bold text-lg">{title}</h2>
        <p className="text-teal-400 text-[10px] font-black uppercase tracking-widest">Active Roleplay Session</p>
      </div>
    </div>
    <Button
      onClick={onFinish}
      className="bg-teal-600 hover:bg-teal-700 text-white px-6 py-5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-teal-900/40 flex items-center gap-2"
    >
      <Flag size={14} /> Finish
    </Button>
  </div>
);

export default React.memo(VoiceHeader);