"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"

export default function Component() {
  const [isEnabled, setIsEnabled] = useState(false)
  const [protocol, setProtocol] = useState("tcp")
  const [udpIp, setUdpIp] = useState("")
  const [udpPort, setUdpPort] = useState("")

  return (
    <div className="w-full max-w-md mx-auto p-6 space-y-6 bg-background rounded-lg shadow-md">
      <div className="flex items-center justify-between">
        <Label htmlFor="protocol-switch" className="text-lg font-semibold">
          Enable Protocol Selector
        </Label>
        <Switch
          id="protocol-switch"
          checked={isEnabled}
          onCheckedChange={setIsEnabled}
        />
      </div>

      <div className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="udp-ip">WireGuard UDP IP Address</Label>
          <Input
            id="udp-ip"
            placeholder="Enter UDP IP address"
            value={udpIp}
            onChange={(e) => setUdpIp(e.target.value)}
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="udp-port">WireGuard UDP Port</Label>
          <Input
            id="udp-port"
            placeholder="Enter UDP port"
            value={udpPort}
            onChange={(e) => setUdpPort(e.target.value)}
          />
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor="protocol-select">Select Protocol</Label>
        <Select
          disabled={!isEnabled}
          value={protocol}
          onValueChange={setProtocol}
        >
          <SelectTrigger id="protocol-select">
            <SelectValue placeholder="Select a protocol" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="tcp">TCP over UDP</SelectItem>
            <SelectItem value="sstp">SSTP over UDP</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <Button className="w-full" disabled={!isEnabled}>
        Apply Settings
      </Button>
    </div>
  )
}