"use client"

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

interface WorkflowsProps {
  data: {
    [workflowKey: string]: {
      title: string
      steps: Array<{
        step: number
        command: string
        description: string
      }>
    }
  }
}

export function Workflows({ data }: WorkflowsProps) {
  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-4xl font-bold text-gray-900 mb-4">Workflows</h1>
        <p className="text-xl text-gray-600">Common development workflows and step-by-step guides</p>
      </div>

      {Object.entries(data).map(([workflowKey, workflow]) => (
        <section key={workflowKey} className="bg-white rounded-lg border border-gray-200 overflow-hidden">
          <div className="p-6 border-b border-gray-200 bg-gray-50">
            <h2 className="text-2xl font-semibold text-gray-900">{workflow.title}</h2>
          </div>

          <div className="p-6">
            <div className="space-y-6">
              {workflow.steps.map((step, index) => (
                <div key={index} className="flex space-x-4">
                  <div className="flex-shrink-0">
                    <Badge variant="default" className="w-8 h-8 rounded-full flex items-center justify-center">
                      {step.step}
                    </Badge>
                  </div>
                  <div className="flex-1 space-y-2">
                    <div>
                      <h3 className="font-medium text-gray-900">{step.description}</h3>
                      <CodeBlock code={step.command} language="bash" />
                    </div>
                    {index < workflow.steps.length - 1 && <div className="w-px h-4 bg-gray-300 ml-4"></div>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      ))}

      {/* Quick Reference */}
      <section className="bg-amber-50 rounded-lg p-6 border border-amber-200">
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">Quick Reference</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <h3 className="font-medium text-gray-900 mb-2">Essential Commands</h3>
            <div className="space-y-1 text-sm">
              <CodeBlock code="npx ruch create <domain>" language="bash" />
              <CodeBlock code="npx ruch context generate" language="bash" />
              <CodeBlock code="npx ruch guide-ai" language="bash" />
            </div>
          </div>
          <div>
            <h3 className="font-medium text-gray-900 mb-2">Testing Setup</h3>
            <div className="space-y-1 text-sm">
              <CodeBlock code="npx ruch msw init" language="bash" />
              <CodeBlock code="npx ruch msw handlers" language="bash" />
              <CodeBlock code="npx ruch msw mocks" language="bash" />
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}