/**
 * TestingGuide Component - Guide for testing the admin panel
 */

export default function TestingGuide() {
  return (
    <div className="space-y-6">
      <div className="bg-black/20 rounded-xl p-6 border border-white/10">
        <h2 className="text-xl font-bold text-white mb-4">Testing Guide</h2>
        
        <div className="space-y-4 text-white/80">
          <div>
            <h3 className="text-lg font-semibold text-white mb-2">Running Tests</h3>
            <div className="bg-white/5 rounded-lg p-4 font-mono text-sm">
              <p className="mb-2"># Run all tests</p>
              <p className="text-blue-300">npm run test</p>
              <p className="mt-4 mb-2"># Run tests with UI</p>
              <p className="text-blue-300">npm run test:ui</p>
              <p className="mt-4 mb-2"># Run tests with coverage</p>
              <p className="text-blue-300">npm run test:coverage</p>
              <p className="mt-4 mb-2"># Run tests in watch mode</p>
              <p className="text-blue-300">npm run test:watch</p>
            </div>
          </div>

          <div>
            <h3 className="text-lg font-semibold text-white mb-2">Test Coverage</h3>
            <p className="text-sm">
              Current test coverage targets: 50% (branches, functions, lines, statements)
            </p>
            <p className="text-sm mt-2">
              Tests are located in: <code className="bg-white/10 px-2 py-1 rounded">src/__tests__/</code>
            </p>
          </div>

          <div>
            <h3 className="text-lg font-semibold text-white mb-2">Testing Utilities</h3>
            <ul className="list-disc list-inside space-y-1 text-sm">
              <li>React Testing Library for component tests</li>
              <li>Vitest for test runner</li>
              <li>Mocked Web3 providers for blockchain interactions</li>
              <li>Mocked localStorage for storage tests</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}
