import React from 'react';
import { RotateCcw, Save } from 'lucide-react';

interface HeaderProps {
  onReset: () => void;
  onSave: () => void;
}

export const Header: React.FC<HeaderProps> = ({ onReset, onSave }) => {
  return (
    <header className="bg-white border-b border-slate-200 sticky top-0 z-40">
      <div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-end space-x-2">
        <button
          onClick={onReset}
          className="text-xs text-slate-600 hover:text-[#423475] px-3 py-2 rounded-lg border border-slate-200 hover:bg-slate-50 transition-colors flex items-center font-medium cursor-pointer"
        >
          <RotateCcw className="w-3.5 h-3.5 mr-1.5 text-slate-400" />
          Comenzar nuevo intento
        </button>
        <button
          onClick={onSave}
          className="bg-[#423475] hover:bg-[#322758] text-white font-bold text-xs px-4 py-2 rounded-lg transition-colors shadow-xs flex items-center cursor-pointer"
        >
          <Save className="w-3.5 h-3.5 text-[#4AA7BA] mr-1.5" />
          Guardar
        </button>
      </div>
    </header>
  );
};