'use client'

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

interface RequestOverviewProps {
  request: BrainfishRESTRequest
}

export function RequestOverview({ request }: RequestOverviewProps) {
  return (
    <section>
      <h2 className="text-2xl font-semibold mb-4">Overview</h2>
      <div className="bg-muted/50 rounded-sm p-6 space-y-4">
        <div>
          <span className="text-sm font-medium text-muted-foreground">Method</span>
          <p className="mt-1 font-mono">{request.method}</p>
        </div>
        <div>
          <span className="text-sm font-medium text-muted-foreground">Endpoint</span>
          <p className="mt-1 font-mono break-all">{request.endpoint}</p>
        </div>
        {request.tags && request.tags.length > 0 && (
          <div>
            <span className="text-sm font-medium text-muted-foreground">Tags</span>
            <div className="mt-1 flex flex-wrap gap-2">
              {request.tags.map((tag) => (
                <span
                  key={tag}
                  className="px-2 py-1 bg-primary/10 text-primary rounded text-sm"
                >
                  {tag}
                </span>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  )
}
