import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useEventStore } from '../../store/eventStore';

export function SwitchEventButton() {
  const navigate = useNavigate();
  const clearEvent = useEventStore(s => s.clearEvent);

  const handleSwitch = () => {
    clearEvent();
    navigate('/checkin-app', { replace: true });
  };

  return (
    <button
      onClick={handleSwitch}
      className="flex items-center justify-center gap-2 w-full py-4 bg-red-50 border border-red-100 rounded-2xl font-semibold text-red-600 active:scale-95 transition-all"
    >
      <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
      </svg>
      Switch Event
    </button>
  );
}
