import { RadioGroup, Radio } from "@hashti/react";
import type { RadioGroupProps, RadioProps, SelectionColor } from "@hashti/react";

import { useState } from "react";
import { RadioGroup, Radio } from "@hashti/react";

export function BasicRadioGroupDemo() {
  const [tier, setTier] = useState("pro");

  return (
    <RadioGroup
      label="Subscription Tier"
      description="Choose the compute capacity allocated to your Hashti instances."
      value={tier}
      onChange={setTier}
    >
      <Radio value="starter">Starter — 2 vCPU / 4 GB RAM</Radio>
      <Radio value="pro">Pro — 8 vCPU / 32 GB RAM (Recommended)</Radio>
      <Radio value="enterprise">Enterprise — Dedicated Bare Metal</Radio>
    </RadioGroup>
  );
}

import { useState } from "react";
import { RadioGroup, Radio } from "@hashti/react";

export function HorizontalRadioGroupDemo() {
  const [storageType, setStorageType] = useState("ssd");

  return (
    <RadioGroup
      orientation="horizontal"
      label="Storage Media"
      description="Select physical disk medium."
      value={storageType}
      onChange={setStorageType}
    >
      <Radio value="nvme">NVMe</Radio>
      <Radio value="ssd">SSD</Radio>
      <Radio value="hdd">HDD</Radio>
    </RadioGroup>
  );
}

import { useState } from "react";
import { RadioGroup, Radio } from "@hashti/react";

export function InvalidRadioGroupDemo() {
  const [region, setRegion] = useState("");
  const [hasSubmitted, setHasSubmitted] = useState(false);

  const isInvalid = hasSubmitted && !region;

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        setHasSubmitted(true);
      }}
      className="flex flex-col gap-4"
    >
      <RadioGroup
        label="Data Center Location"
        description="Select the primary edge node for your deployment."
        errorMessage="You must select a deployment region to proceed."
        isInvalid={isInvalid}
        value={region}
        onChange={setRegion}
      >
        <Radio value="tehran">Tehran (IR-THR)</Radio>
        <Radio value="frankfurt">Frankfurt (EU-FRA)</Radio>
        <Radio value="amsterdam">Amsterdam (EU-AMS)</Radio>
      </RadioGroup>

      <button type="submit" className="self-start rounded bg-blue-600 px-4 py-2 text-white">
        Deploy Node
      </button>
    </form>
  );
}

import { RadioGroup, Radio } from "@hashti/react";

export function DisabledRadioDemo() {
  return (
    <RadioGroup label="Network Protocols" defaultValue="https">
      <Radio value="https">HTTPS / TLS 1.3 (Enforced)</Radio>
      <Radio value="http" isDisabled>
        HTTP (Plaintext — Deprecated)
      </Radio>
      <Radio value="grpc">gRPC Streaming</Radio>
    </RadioGroup>
  );
}