import { Shield } from 'lucide-react';

import type {
  SignInModalActions,
  SignInModalState,
} from '@/components/sign-in-modal/types';

type AuthModeToggleProps = {
  state: SignInModalState;
  actions: SignInModalActions;
};

export function AuthModeToggle({ state, actions }: AuthModeToggleProps) {
  const nextMode = state.mode === 'signin' ? 'signup' : 'signin';

  return (
    <>
      <div className="mt-5 text-center">
        <p className="text-sm text-slate-500">
          {state.mode === 'signin' ? "Don't have an account?" : 'Already have an account?'}
          <button
            type="button"
            onClick={() => actions.switchMode(nextMode)}
            className="ml-1.5 text-violet-400 hover:text-violet-300 font-semibold transition-colors"
          >
            {state.mode === 'signin' ? 'Sign Up' : 'Sign In'}
          </button>
        </p>
      </div>
      <div className="mt-4 flex items-center justify-center gap-1.5 text-[10px] text-slate-600">
        <Shield size={10} />
        <span>Secured with backend authentication &middot; FERPA Compliant</span>
      </div>
    </>
  );
}
