import { FileCog } from 'lucide-react'
import { useState } from 'react'
import { useOnboarding } from '../store'

/**
 * Second step in the onboarding flow
 * Handles deployment configuration and environment setup
 *
 * Features:
 * - Deployment type selection (auction/LRN)
 * - Environment variable configuration
 * - Account selection
 *
 * @component
 */
export function ConfigureStep() {
  const { formData, setFormData } = useOnboarding()
  const [activeTab, setActiveTab] = useState<'create-auction' | 'deployer-lrn'>(
    'create-auction'
  )
  const [environments, setEnvironments] = useState({
    production: false,
    preview: false,
    development: false
  })

  // const handleEnvironmentChange = (env: keyof typeof environments) => {
  //   setEnvironments((prev) => ({
  //     ...prev,
  //     [env]: !prev[env],
  //   }))
  //   setFormData({
  //     environmentVars: {
  //       ...formData.environmentVars,
  //       [env]: !environments[env],
  //     },
  //   })
  // }

  return (
    <div className="w-full">
      <div className="max-w-2xl mx-auto space-y-8">
        <div className="flex flex-col items-center justify-center w-full max-w-[445px] mx-auto">
          <div className="w-full flex flex-col items-center gap-6">
            {/* Header section with icon and description */}
            <div className="flex flex-col items-center gap-1">
              <FileCog className="w-16 h-16 text-foreground" />

              <div className="flex flex-col items-center gap-1">
                <h2 className="text-2xl font-bold text-foreground">
                  Configure
                </h2>
                <p className="text-base text-muted-foreground text-center">
                  Set the deployer LRN for a single deployment or by creating a
                  deployer auction for multiple deployments
                </p>
              </div>
            </div>
            Content sections will be placed here: 1. Deployment type tabs
            (auction/LRN) 2. Configuration forms 3. Environment variables 4.
            Account selection ...content here/
            {/* <Configure /> */}
          </div>
        </div>
      </div>
    </div>
  )
}