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

const ModemCard = () => {
  const [apn, setApn] = useState("");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [authType, setAuthType] = useState("PAP");

  return (
    // TODO: Add switch for Auto vs Manual settings
    <Card>
      <CardHeader title={"Modem"} />
      <div className="flex flex-col gap-4">
        <FormGroup>
          <label
            htmlFor="apn"
            className="font-medium whitespace-nowrap md:w-2/3"
          >
            APN
          </label>
          <input
            id="apn"
            name="apn"
            type="text"
            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
            placeholder="Enter APN"
            value={apn}
            onChange={(e) => setApn(e.target.value)}
          />
        </FormGroup>
        <FormGroup>
          <label
            htmlFor="modemUsername"
            className="font-medium whitespace-nowrap md:w-2/3"
          >
            Username
          </label>
          <input
            id="modemUsername"
            name="modemUsername"
            type="text"
            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
            placeholder="Enter Username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </FormGroup>
        <FormGroup>
          <label
            htmlFor="modemPassword"
            className="font-medium whitespace-nowrap md:w-2/3"
          >
            Password
          </label>
          <input
            id="modemPassword"
            name="modemPassword"
            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="authType"
            className="font-medium whitespace-nowrap md:w-2/3"
          >
            Authentication Type
          </label>
          <select
            id="authType"
            name="authType"
            className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 md:w-2/3"
            value={authType}
            onChange={(e) => setAuthType(e.target.value)}
          >
            <option value="PAP">PAP</option>
            <option value="CHAP">CHAP</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={() => handleModemSave(apn, username, password, authType)}
        >
          Save Modem Settings
        </button>
      </div>
    </Card>
  );
};

export default ModemCard;