"use client"

import { CodeBlock } from "@/components/cli-docs/code-block"

interface ArchitectureProps {
  data: {
    [layer: string]: {
      emoji: string
      title: string
      description: string
      location: string
      responsibilities: string[]
      example: string
    }
  }
}

export function Architecture({ data }: ArchitectureProps) {
  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-4xl font-bold text-gray-900 mb-4">Architecture Layers</h1>
        <p className="text-xl text-gray-600">
          Understanding Ruch's simplified hexagonal architecture for React applications
        </p>
      </div>

      <div className="grid grid-cols-1 gap-8">
        {Object.entries(data).map(([layerKey, layer]) => (
          <section key={layerKey} className="bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm">
            <div className="p-6 border-b border-gray-200 bg-gray-50">
              <div className="flex items-center space-x-4">
                <span className="text-3xl">{layer.emoji}</span>
                <div>
                  <h2 className="text-2xl font-semibold text-gray-900">{layer.title}</h2>
                  <p className="text-gray-600">{layer.description}</p>
                </div>
              </div>
            </div>

            <div className="p-6 space-y-6">
              {/* Location */}
              <div>
                <h3 className="font-medium text-gray-900 mb-2">Location</h3>
                <CodeBlock code={layer.location} language="text" />
              </div>

              {/* Responsibilities */}
              <div>
                <h3 className="font-medium text-gray-900 mb-3">Responsibilities</h3>
                <ul className="space-y-2">
                  {layer.responsibilities.map((responsibility, index) => (
                    <li key={index} className="flex items-start space-x-2">
                      <span className="text-blue-500 mt-1">•</span>
                      <span className="text-gray-700">{responsibility}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Example */}
              <div>
                <h3 className="font-medium text-gray-900 mb-3">Example</h3>
                <CodeBlock code={layer.example} language="typescript" />
              </div>
            </div>
          </section>
        ))}
      </div>

      {/* Architecture Flow */}
      <section className="bg-blue-50 rounded-lg p-6 border border-blue-200">
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">Architecture Flow</h2>
        <div className="space-y-4">
          <div className="flex items-center space-x-4">
            <div className="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-bold">
              1
            </div>
            <span className="text-gray-700">UI components use domain hooks (never services directly)</span>
          </div>
          <div className="flex items-center space-x-4">
            <div className="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-bold">
              2
            </div>
            <span className="text-gray-700">Hooks integrate with React Query and call services</span>
          </div>
          <div className="flex items-center space-x-4">
            <div className="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-bold">
              3
            </div>
            <span className="text-gray-700">Services contain business logic and use ports (interfaces)</span>
          </div>
          <div className="flex items-center space-x-4">
            <div className="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-bold">
              4
            </div>
            <span className="text-gray-700">Adapters implement ports and handle external dependencies</span>
          </div>
          <div className="flex items-center space-x-4">
            <div className="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-bold">
              5
            </div>
            <span className="text-gray-700">Entities define pure business models with no dependencies</span>
          </div>
        </div>
      </section>
    </div>
  )
}