"use client"

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

interface OverviewProps {
  data: {
    title: string
    description: string
    features: string[]
    architecturePrinciples: string[]
    quickStart: {
      commands: string[]
      benefits: string[]
    }
  }
}

export function Overview({ data }: OverviewProps) {
  return (
    <div className="space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-4xl font-bold text-gray-900 mb-4">{data.title}</h1>
        <p className="text-xl text-gray-600 leading-relaxed">{data.description}</p>
      </div>

      {/* Features */}
      <section>
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">Key Features</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {data.features.map((feature, index) => (
            <div key={index} className="flex items-center space-x-3 p-4 bg-white rounded-lg border border-gray-200">
              <span className="text-2xl">{feature.split(" ")[0]}</span>
              <span className="text-gray-700">{feature.substring(feature.indexOf(" ") + 1)}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Architecture Principles */}
      <section>
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">Architecture Principles</h2>
        <div className="space-y-3">
          {data.architecturePrinciples.map((principle, index) => (
            <div key={index} className="flex items-start space-x-3 p-4 bg-blue-50 rounded-lg border border-blue-200">
              <Badge variant="secondary" className="mt-0.5">
                {index + 1}
              </Badge>
              <p className="text-gray-700">{principle}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Quick Start */}
      <section>
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">Quick Start</h2>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div>
            <h3 className="text-lg font-medium text-gray-900 mb-3">Get Started in 3 Commands</h3>
            <div className="space-y-2">
              {data.quickStart.commands.map((command, index) => (
                <CodeBlock key={index} code={command} language="bash" />
              ))}
            </div>
          </div>
          <div>
            <h3 className="text-lg font-medium text-gray-900 mb-3">What You Get</h3>
            <ul className="space-y-2">
              {data.quickStart.benefits.map((benefit, index) => (
                <li key={index} className="flex items-start space-x-2">
                  <span className="text-green-500 mt-1">✓</span>
                  <span className="text-gray-700">{benefit}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
    </div>
  )
}