import Card from "../../UI/Card";
import CardHeader from "../../UI/CardHeader";
import { useState } from "react";
import FormGroup from "../components/FormGroup";

const WiFiCard = () => {
  const [ssid, setSsid] = useState("");
  const [password, setPassword] = useState("");
  const [encryption, setEncryption] = useState("WPA2");

  return (
    <Card className="mb-4">
      <CardHeader title={"WiFi"} />
      <div className="flex flex-col gap-4">
        <FormGroup>
          <label
            htmlFor="ssid"
            className="font-medium whitespace-nowrap md:w-2/3"
          >
            SSID
          </label>
          <input
            id="ssid"
            name="ssid"
            type="text"
            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
            placeholder="Enter SSID"
            value={ssid}
            onChange={(e) => setSsid(e.target.value)}
          />
        </FormGroup>
        <FormGroup>
          <label
            htmlFor="password"
            className="font-medium whitespace-nowrap md:w-2/3"
          >
            Password
          </label>
          <input
            id="password"
            name="password"
            type="password"
            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
            placeholder="Enter Password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </FormGroup>
        <FormGroup>
          <label
            htmlFor="encryption"
            className="font-medium whitespace-nowrap md:w-2/3"
          >
            WPA/Encryption Type
          </label>
          <select
            id="encryption"
            name="encryption"
            className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 md:w-2/3"
            value={encryption}
            onChange={(e) => setEncryption(e.target.value)}
          >
            <option value="WPA2">WPA2</option>
            <option value="WPA3">WPA3</option>
            <option value="WEP">WEP</option>
            <option value="None">None</option>
          </select>
        </FormGroup>
        <button
          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
          //onClick={() => handleWiFiSave(ssid, password, encryption)}
        >
          Save WiFi Settings
        </button>
      </div>
    </Card>
  );
};

export default WiFiCard;