"use client"

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

interface ExamplesProps {
  data: {
    [exampleKey: string]: {
      title: string
      domains: string[]
      setup: string[]
    }
  }
}

export function Examples({ data }: ExamplesProps) {
  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-4xl font-bold text-gray-900 mb-4">Examples</h1>
        <p className="text-xl text-gray-600">Real-world examples and complete project setups</p>
      </div>

      {Object.entries(data).map(([exampleKey, example]) => (
        <section key={exampleKey} 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">
            <h2 className="text-2xl font-semibold text-gray-900">{example.title}</h2>
          </div>

          <div className="p-6 space-y-6">
            {/* Domains */}
            <div>
              <h3 className="font-medium text-gray-900 mb-3">Domains</h3>
              <div className="flex flex-wrap gap-2">
                {example.domains.map((domain, index) => (
                  <Badge key={index} variant="secondary">
                    {domain}
                  </Badge>
                ))}
              </div>
            </div>

            {/* Setup Commands */}
            <div>
              <h3 className="font-medium text-gray-900 mb-3">Complete Setup</h3>
              <div className="space-y-2">
                {example.setup.map((command, index) => (
                  <div key={index} className="flex items-start space-x-3">
                    <Badge variant="outline" className="mt-1 text-xs">
                      {index + 1}
                    </Badge>
                    <div className="flex-1">
                      <CodeBlock code={command} language="bash" />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      ))}

      {/* Project Structure Preview */}
      <section className="bg-blue-50 rounded-lg p-6 border border-blue-200">
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">Expected Project Structure</h2>
        <p className="text-gray-600 mb-4">
          After running the e-commerce setup commands, your project will have this structure:
        </p>
        <CodeBlock
          code={`src/
├── domains/
│   ├── user/
│   │   ├── entities/
│   │   ├── ports/
│   │   ├── services/
│   │   ├── adapters/
│   │   ├── hooks/
│   │   └── ui/
│   ├── product/
│   ├── cart/
│   ├── order/
│   ├── payment/
│   └── notification/
├── context/
│   └── ServiceContext.tsx
├── mocks/
│   ├── browser.ts
│   ├── server.ts
│   ├── handlers/
│   └── data/
└── setupTests.ts`}
          language="text"
        />
      </section>

      {/* Next Steps */}
      <section className="bg-green-50 rounded-lg p-6 border border-green-200">
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">Next Steps</h2>
        <ul className="space-y-3">
          <li className="flex items-start space-x-2">
            <span className="text-green-500 mt-1">1.</span>
            <span className="text-gray-700">Implement your business logic in the services layer</span>
          </li>
          <li className="flex items-start space-x-2">
            <span className="text-green-500 mt-1">2.</span>
            <span className="text-gray-700">Create API adapters for external services</span>
          </li>
          <li className="flex items-start space-x-2">
            <span className="text-green-500 mt-1">3.</span>
            <span className="text-gray-700">Build React components using domain hooks</span>
          </li>
          <li className="flex items-start space-x-2">
            <span className="text-green-500 mt-1">4.</span>
            <span className="text-gray-700">Write comprehensive tests for each layer</span>
          </li>
          <li className="flex items-start space-x-2">
            <span className="text-green-500 mt-1">5.</span>
            <span className="text-gray-700">Use AI tools with generated documentation for faster development</span>
          </li>
        </ul>
      </section>
    </div>
  )
}