"use client"

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

interface InstallationProps {
  data: {
    quickStart: string
    globalInstallation: Array<{
      name: string
      command: string
    }>
    systemRequirements: string[]
  }
}

export function Installation({ data }: InstallationProps) {
  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-4xl font-bold text-gray-900 mb-4">Installation</h1>
        <p className="text-xl text-gray-600">Get started with Ruch CLI in seconds</p>
      </div>

      {/* Quick Start */}
      <section>
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">Quick Start (No Installation Required)</h2>
        <p className="text-gray-600 mb-4">The fastest way to try Ruch is using npx. No global installation needed:</p>
        <CodeBlock code={data.quickStart} language="bash" />
      </section>

      {/* Global Installation */}
      <section>
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">Global Installation</h2>
        <p className="text-gray-600 mb-6">
          For frequent use, install Ruch globally with your preferred package manager:
        </p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {data.globalInstallation.map((method, index) => (
            <div key={index} className="space-y-2">
              <div className="flex items-center space-x-2">
                <h3 className="font-medium text-gray-900">{method.name}</h3>
                {method.name.includes("Recommended") && (
                  <Badge variant="default" className="bg-green-100 text-green-800">
                    Recommended
                  </Badge>
                )}
              </div>
              <CodeBlock code={method.command} language="bash" />
            </div>
          ))}
        </div>
      </section>

      {/* System Requirements */}
      <section>
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">System Requirements</h2>
        <div className="bg-gray-50 rounded-lg p-6 border border-gray-200">
          <ul className="space-y-3">
            {data.systemRequirements.map((requirement, index) => (
              <li key={index} className="flex items-start space-x-3">
                <span className="text-blue-500 mt-1">•</span>
                <span className="text-gray-700">{requirement}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* Verification */}
      <section>
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">Verify Installation</h2>
        <p className="text-gray-600 mb-4">After global installation, verify that Ruch is installed correctly:</p>
        <CodeBlock code="ruch --version" language="bash" />
        <p className="text-sm text-gray-500 mt-2">This should display the current version of Ruch CLI.</p>
      </section>
    </div>
  )
}