Switch

<div className="flex flex-col gap-5 max-w-md w-full">
  <Switch
    label="Active Shield Matrix"
    description="Reflects kinetic energy and laser pulses"
    defaultChecked
  />
  <Switch
    label="Quantum Telemetry Sync"
    description="Streams realtime core metrics to orbital node"
  />
</div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-2xl">
  <Switch variant="neon" label="Neon Cyan" description="Tactical default" defaultChecked />
  <Switch variant="neonPurple" label="Neon Violet" description="Neural synapse" defaultChecked />
  <Switch variant="neonGreen" label="Neon Emerald" description="Bio-lock stable" defaultChecked />
</div>

<div className="flex flex-col gap-4 p-5 rounded-xl bg-[#050811] border border-white/[0.06] max-w-md w-full">
  <div className="flex items-center justify-between">
    <Switch
      labelPosition="left"
      variant="neon"
      label="Subnet Proxy Bridging"
      description="Route all local packets via encrypted egress"
      defaultChecked
    />
  </div>
</div>

<div className="flex flex-col gap-5 max-w-md w-full">
  <Switch switchSize="sm" label="Compact scale (sm - 16px)" defaultChecked />
  <Switch switchSize="md" label="Standard scale (md - 20px)" defaultChecked />
  <Switch switchSize="lg" label="High-touch hero scale (lg - 24px)" defaultChecked />
</div>

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-6">
    <div className="flex items-center justify-between pb-4 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Cpu className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">HARDWARE OVERCLOCK</span>
      </div>
      <Badge variant="glass" dot dotColor={overclock ? 'cyan' : 'slate'}>
        {overclock ? 'BOOST ACTIVE' : 'NOMINAL'}
      </Badge>
    </div>

    <div className="space-y-4">
      <div className="flex items-center justify-between p-3.5 rounded-xl bg-white/[0.02] border border-white/[0.06]">
        <Switch
          variant="neon"
          label="Supercharge Core Frequency"
          description="Boost clock speed to 5.4 GHz (+35%)"
          checked={overclock}
          onCheckedChange={setOverclock}
        />
      </div>

      <div className="flex items-center justify-between p-3.5 rounded-xl bg-white/[0.02] border border-white/[0.06]">
        <Switch
          variant="neonGreen"
          label="Cryogenic Liquid Cooling"
          description="Maintain sub-zero junction thermal levels"
          checked={cooling}
          onCheckedChange={setCooling}
        />
      </div>
    </div>

    <div className="pt-2">
      <Button variant="neon" glow className="w-full">
        COMMIT PROFILE
      </Button>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">SUBSYSTEM INTERCEPT MATRIX</CardTitle>
      <Badge variant="neon" size="sm">ONLINE</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Configure real-time automation interceptors.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.06]">
      <Switch
        variant="neon"
        label="Kinetic Defense Shield"
        description="Deflects 95% incoming macro-debris"
        defaultChecked
      />
    </div>
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.06]">
      <Switch
        variant="neonPurple"
        label="Automated Counter-EMP"
        description="Discharges capacitor banks on pulse detection"
        defaultChecked
      />
    </div>
    <div className="flex items-center justify-between">
      <Switch
        variant="neonGreen"
        label="Orbital Optical Comm Laser"
        description="Establish direct line-of-sight laser uplink"
      />
    </div>
  </CardContent>
</Card>