'use client'

import type { FlowType } from '../types'
import { STUDIO_SCREENS, ADMIN_SCREENS } from '../data'

interface FlowTypeSelectorProps {
  flowType: FlowType
  onFlowTypeChange: (type: FlowType) => void
}

export function FlowTypeSelector({ flowType, onFlowTypeChange }: FlowTypeSelectorProps) {
  return (
    <div className="grid grid-cols-2 gap-4">
      <button
        onClick={() => onFlowTypeChange('studio')}
        className={`p-6 rounded-xl border-2 transition-all ${
          flowType === 'studio'
            ? 'border-green-500 bg-green-50 shadow-lg'
            : 'border-slate-200 bg-white hover:border-slate-300'
        }`}
      >
        <div className="flex items-center gap-4">
          <div className={`w-14 h-14 rounded-xl flex items-center justify-center text-2xl ${
            flowType === 'studio' ? 'bg-green-500 text-white' : 'bg-slate-100'
          }`}>
            🎓
          </div>
          <div className="text-left">
            <div className="font-bold text-lg">Studio (Port 8000)</div>
            <div className="text-sm text-slate-500">Lehrer-Oberflaeche</div>
            <div className="text-xs text-slate-400 mt-1">{STUDIO_SCREENS.length} Screens</div>
          </div>
        </div>
      </button>

      <button
        onClick={() => onFlowTypeChange('admin')}
        className={`p-6 rounded-xl border-2 transition-all ${
          flowType === 'admin'
            ? 'border-primary-500 bg-primary-50 shadow-lg'
            : 'border-slate-200 bg-white hover:border-slate-300'
        }`}
      >
        <div className="flex items-center gap-4">
          <div className={`w-14 h-14 rounded-xl flex items-center justify-center text-2xl ${
            flowType === 'admin' ? 'bg-primary-500 text-white' : 'bg-slate-100'
          }`}>
            ⚙️
          </div>
          <div className="text-left">
            <div className="font-bold text-lg">Admin v2 (Port 3002)</div>
            <div className="text-sm text-slate-500">Admin Panel</div>
            <div className="text-xs text-slate-400 mt-1">{ADMIN_SCREENS.length} Screens</div>
          </div>
        </div>
      </button>
    </div>
  )
}
