"use client"

import { Badge } from "@/components/ui/badge"

interface TestingProps {
  data: {
    layers: Array<{
      name: string
      description: string
      tools: string[]
      location: string
    }>
  }
}

export function Testing({ data }: TestingProps) {
  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-4xl font-bold text-gray-900 mb-4">Testing Strategy</h1>
        <p className="text-xl text-gray-600">Comprehensive testing approach for hexagonal architecture</p>
      </div>

      <div className="grid grid-cols-1 gap-6">
        {data.layers.map((layer, index) => (
          <section key={index} className="bg-white rounded-lg border border-gray-200 p-6">
            <div className="space-y-4">
              <div>
                <h2 className="text-xl font-semibold text-gray-900">{layer.name}</h2>
                <p className="text-gray-600">{layer.description}</p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <h3 className="font-medium text-gray-900 mb-2">Tools</h3>
                  <div className="flex flex-wrap gap-2">
                    {layer.tools.map((tool, toolIndex) => (
                      <Badge key={toolIndex} variant="secondary">
                        {tool}
                      </Badge>
                    ))}
                  </div>
                </div>

                <div>
                  <h3 className="font-medium text-gray-900 mb-2">Location</h3>
                  <code className="text-sm bg-gray-100 px-2 py-1 rounded">{layer.location}</code>
                </div>
              </div>
            </div>
          </section>
        ))}
      </div>

      {/* Testing Pyramid */}
      <section className="bg-green-50 rounded-lg p-6 border border-green-200">
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">Testing Pyramid</h2>
        <div className="space-y-4">
          <div className="text-center">
            <div className="inline-block">
              <div className="w-32 h-8 bg-red-200 flex items-center justify-center text-sm font-medium mb-2">
                E2E Tests
              </div>
              <div className="w-48 h-8 bg-yellow-200 flex items-center justify-center text-sm font-medium mb-2">
                Integration Tests
              </div>
              <div className="w-64 h-8 bg-green-200 flex items-center justify-center text-sm font-medium">
                Unit Tests
              </div>
            </div>
          </div>
          <div className="text-center text-sm text-gray-600">
            <p>Focus on unit tests for business logic, integration tests for adapters, and minimal E2E tests</p>
          </div>
        </div>
      </section>

      {/* Best Practices */}
      <section className="bg-blue-50 rounded-lg p-6 border border-blue-200">
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">Testing Best Practices</h2>
        <ul className="space-y-3">
          <li className="flex items-start space-x-2">
            <span className="text-blue-500 mt-1">✓</span>
            <span className="text-gray-700">Test business logic in services with mocked dependencies</span>
          </li>
          <li className="flex items-start space-x-2">
            <span className="text-blue-500 mt-1">✓</span>
            <span className="text-gray-700">Use MSW for testing adapters with realistic API responses</span>
          </li>
          <li className="flex items-start space-x-2">
            <span className="text-blue-500 mt-1">✓</span>
            <span className="text-gray-700">Test React hooks with React Testing Library and MSW</span>
          </li>
          <li className="flex items-start space-x-2">
            <span className="text-blue-500 mt-1">✓</span>
            <span className="text-gray-700">Keep tests colocated with implementation files</span>
          </li>
          <li className="flex items-start space-x-2">
            <span className="text-blue-500 mt-1">✓</span>
            <span className="text-gray-700">Focus on testing behavior, not implementation details</span>
          </li>
        </ul>
      </section>
    </div>
  )
}