import React from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import MonacoEditor from '@/components/shared/MonacoEditor.jsx'

const MockRouteRequest=({
  name,
  method,
  pathPattern,
  requestScript,
  onChange,
  onScriptChange
}) => {
  return (
      <div className="space-y-4 m-1">
        {/* Name */}
        <div>
          <Label htmlFor="name" className="must">
            이름
          </Label>
          <Input
              id="name"
              required
              value={name}
              onChange={(e) => onChange('name', e.target.value)}
          />
        </div>

        {/* Method & Path */}
        <div className="flex gap-2">
          <div className="flex-1 max-w-[120px]">
            <Label htmlFor="method" className="must">
              Method
            </Label>
            <select
                id="method"
                required
                className="border rounded-md p-2 w-full"
                value={method}
                onChange={(e) => onChange('method', e.target.value)}
            >
              <option value="GET">GET</option>
              <option value="POST">POST</option>
              <option value="PUT">PUT</option>
              <option value="DELETE">DELETE</option>
              <option value="CONNECT">CONNECT</option>
              <option value="HEAD">HEAD</option>
              <option value="OPTIONS">OPTIONS</option>
              <option value="TRACE">TRACE</option>
              <option value="PATCH">PATCH</option>
            </select>
          </div>
          <div className="flex-1">
            <Label htmlFor="path" className="must">
              Path
            </Label>
            <Input
                id="path"
                required
                placeholder="서버에 노출되는 경로 (/부터 입력)"
                value={pathPattern}
                onChange={(e) => onChange('pathPattern', e.target.value)}
            />
          </div>
        </div>

        {/* Request Script */}
        <Card>
          <CardHeader>
            <CardTitle>요청 스크립트</CardTitle>
          </CardHeader>
          <CardContent className="h-[300px]">
            <MonacoEditor
                value={requestScript}
                language="javascript"
                onChange={onScriptChange}
                height="full"
            />
          </CardContent>
        </Card>
      </div>
  )
}

export default MockRouteRequest;
