'use client'

import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { useAuth } from '@/components/providers/auth-provider'

export function NavAuthButtons() {
  const { user, loading } = useAuth()

  if (loading) {
    return <div className="w-24 h-9" /> // placeholder to avoid layout shift
  }

  if (user) {
    return (
      <Link href="/app">
        <Button size="sm" className="bg-red-600 hover:bg-red-700">
          Zur App
        </Button>
      </Link>
    )
  }

  return (
    <>
      <Link href="/login">
        <Button variant="ghost" size="sm">Anmelden</Button>
      </Link>
      <Link href="/register">
        <Button size="sm" className="bg-red-600 hover:bg-red-700">
          Kostenlos starten
        </Button>
      </Link>
    </>
  )
}
