import { Component } from 'solid-js';
import { useAuth, useAuthActions } from '../../lib/auth';
import { getClerk } from '../../lib/auth/clerk-client';

export const SignIn: Component = () => {
  const auth = useAuth();
  const { signIn } = useAuthActions();

  return (
    <div class="freno-auth-container">
      <div class="freno-auth-card">
        <div class="freno-auth-header">
          <h1 class="freno-auth-title">Welcome back</h1>
          <p class="freno-auth-subtitle">Sign in to your FrenoCorp account</p>
        </div>

        {auth().error && (
          <div class="freno-alert freno-alert-error" role="alert">
            {auth().error}
          </div>
        )}

        <div class="freno-auth-actions">
          <button class="freno-btn freno-btn-primary freno-btn-full" onClick={signIn}>
            Sign in with Email
          </button>
          <button 
            class="freno-btn freno-btn-outline freno-btn-full"
            type="button"
            onClick={() => {
              const clerk = getClerk();
              if (clerk) clerk.openSignIn();
            }}
          >
            Sign in with Google
          </button>
          <button 
            class="freno-btn freno-btn-outline freno-btn-full"
            type="button"
            onClick={() => {
              const clerk = getClerk();
              if (clerk) clerk.openSignIn();
            }}
          >
            Sign in with GitHub
          </button>
        </div>

        <div class="freno-auth-footer">
          <p>
            Don't have an account?{' '}
            <a href="/sign-up">Create one</a>
          </p>
        </div>
      </div>
    </div>
  );
};
