'use client'

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

interface HeadersSectionProps {
  headers: BrainfishRESTHeader[]
}

export function HeadersSection({ headers }: HeadersSectionProps) {
  return (
    <section>
      <h2 className="text-2xl font-semibold mb-4">Headers</h2>
      <div className="border rounded-sm overflow-hidden">
        <table className="w-full">
          <thead className="bg-muted/50">
            <tr>
              <th className="px-4 py-3 text-left text-sm font-semibold">Name</th>
              <th className="px-4 py-3 text-left text-sm font-semibold">Description</th>
              <th className="px-4 py-3 text-left text-sm font-semibold">Required</th>
            </tr>
          </thead>
          <tbody>
            {headers.map((header) => (
              <tr key={header.key} className="border-t">
                <td className="px-4 py-3 font-mono text-sm">{header.key}</td>
                <td className="px-4 py-3 text-sm text-muted-foreground">
                  {header.description || '-'}
                </td>
                <td className="px-4 py-3 text-sm">
                  {header.active ? (
                    <span className="text-green-600">Required</span>
                  ) : (
                    <span className="text-muted-foreground">Optional</span>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  )
}
