'use client'

import type { BrainfishRESTAuth } from '@/lib/api-docs/types'

interface AuthSectionProps {
  auth: BrainfishRESTAuth
}

export function AuthSection({ auth }: AuthSectionProps) {
  if (auth.authType === 'none' || auth.authType === 'inherit') {
    return null
  }

  return (
    <section>
      <h2 className="text-2xl font-semibold mb-4">Authentication</h2>
      <div className="bg-muted/50 rounded-sm p-6">
        {auth.authType === 'basic' && (
          <div className="space-y-2">
            <p className="text-sm font-medium">Type: Basic Authentication</p>
            <p className="text-sm text-muted-foreground">
              Username and password required
            </p>
          </div>
        )}

        {auth.authType === 'bearer' && (
          <div className="space-y-2">
            <p className="text-sm font-medium">Type: Bearer Token</p>
            <p className="text-sm text-muted-foreground">
              Token required in Authorization header
            </p>
          </div>
        )}

        {auth.authType === 'api-key' && (
          <div className="space-y-2">
            <p className="text-sm font-medium">Type: API Key</p>
            <p className="text-sm text-muted-foreground">
              Key: <code className="bg-background px-2 py-1 rounded">{auth.key}</code>
            </p>
            <p className="text-sm text-muted-foreground">
              Location: {auth.addTo === 'HEADERS' ? 'Header' : 'Query Parameter'}
            </p>
          </div>
        )}

        {auth.authType === 'oauth-2' && (
          <div className="space-y-2">
            <p className="text-sm font-medium">Type: OAuth 2.0</p>
            <p className="text-sm text-muted-foreground">
              Grant Type: {auth.grantTypeInfo.grantType.replace('_', ' ')}
            </p>
            {auth.grantTypeInfo.authEndpoint && (
              <p className="text-sm text-muted-foreground">
                Auth Endpoint: <code className="bg-background px-2 py-1 rounded">{auth.grantTypeInfo.authEndpoint}</code>
              </p>
            )}
            {auth.grantTypeInfo.tokenEndpoint && (
              <p className="text-sm text-muted-foreground">
                Token Endpoint: <code className="bg-background px-2 py-1 rounded">{auth.grantTypeInfo.tokenEndpoint}</code>
              </p>
            )}
          </div>
        )}
      </div>
    </section>
  )
}
