'use client'

import { useActionState } from 'react'
import { authenticate } from './actions'

export default function LoginForm() {
  const [state, action, isPending] = useActionState(authenticate, undefined)

  return (
    <form action={action} className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Kullanıcı Adı
        </label>
        <input
          name="username"
          type="text"
          required
          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
          placeholder="admin"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Şifre
        </label>
        <input
          name="password"
          type="password"
          required
          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
          placeholder="••••••••"
        />
      </div>

      {state?.error && (
        <div className="text-red-500 text-sm bg-red-50 p-3 rounded-lg">
          {state.error}
        </div>
      )}

      <button
        type="submit"
        disabled={isPending}
        className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-70"
      >
        {isPending ? 'Giriş Yapılıyor...' : 'Giriş Yap'}
      </button>
    </form>
  )
}