import { useState } from 'react'
import { cn } from '../lib/utils'
import type { PRStatus } from '../types/api'

// Global PR view — shows PRs across a known repo (MVP: uses first repo)
// In the full build this would aggregate across all user repos
export default function PRsPage() {
  const [status, setStatus] = useState<PRStatus>('open')

  return (
    <div className="max-w-4xl mx-auto px-4 md:px-6 py-6">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-xl font-semibold text-[#172B4D]">Pull Requests</h1>
      </div>

      <div className="flex gap-1 mb-4 border-b border-[#DFE1E6]">
        {(['open', 'merged', 'closed'] as PRStatus[]).map(s => (
          <button
            key={s}
            onClick={() => setStatus(s)}
            className={cn(
              'px-4 py-2 text-sm font-medium capitalize border-b-2 -mb-px transition-colors min-h-[44px]',
              status === s
                ? 'border-[#0052CC] text-[#0052CC]'
                : 'border-transparent text-[#5E6C84] hover:text-[#172B4D]',
            )}
          >
            {s}
          </button>
        ))}
      </div>

      <p className="text-sm text-[#5E6C84] py-6 text-center">
        Navigate to a repository to view its pull requests.
      </p>
    </div>
  )
}