export default function Reports() {
  return (
    <div>
      <h1 className="text-3xl font-bold text-gray-800 mb-6">Reports</h1>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">Payment Reports</h2>
          <div className="space-y-2">
            <button className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
              Paid vs Unpaid
            </button>
            <button className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
              Annual Summary
            </button>
            <button className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
              Member Outstanding
            </button>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">Claim Reports</h2>
          <div className="space-y-2">
            <button className="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700">
              Claims Status
            </button>
            <button className="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700">
              Beneficiary Analysis
            </button>
            <button className="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700">
              Paid Claims
            </button>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">Member Reports</h2>
          <div className="space-y-2">
            <button className="w-full bg-purple-600 text-white py-2 rounded hover:bg-purple-700">
              Member Listing
            </button>
            <button className="w-full bg-purple-600 text-white py-2 rounded hover:bg-purple-700">
              Age Analysis
            </button>
            <button className="w-full bg-purple-600 text-white py-2 rounded hover:bg-purple-700">
              Active Members
            </button>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">Exports</h2>
          <div className="space-y-2">
            <button className="w-full bg-orange-600 text-white py-2 rounded hover:bg-orange-700">
              Export to CSV
            </button>
            <button className="w-full bg-orange-600 text-white py-2 rounded hover:bg-orange-700">
              Export to Excel
            </button>
            <button className="w-full bg-orange-600 text-white py-2 rounded hover:bg-orange-700">
              Export to PDF
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
