import {
  faToggleLargeOff,
  faToggleLargeOn,
} from "@fortawesome/pro-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import classNames from "classnames"

function Setting({
  props: { key, state, onClick },
}: {
  props: {
    key: string
    state: boolean
    onClick: () => void
  }
}) {
  return (
    <label className="flex items-center justify-between" htmlFor={key}>
      <span className="col-span-2 w-96 select-none text-5xl text-white drop-shadow-md">
        {key}
      </span>
      <FontAwesomeIcon
        className={classNames(
          "text-md mx-auto w-24 rounded-full px-4 drop-shadow-md transition-all",
          state ? "text-blue-500" : "text-gray-800",
          {
            "bg-gray-300 ": state,
          }
        )}
        icon={state ? faToggleLargeOn : faToggleLargeOff}
      />
      <input
        className="bg-none"
        checked={state}
        type="checkbox"
        id={key}
        onChange={onClick}
        hidden={true}
      />
    </label>
  )
}

export default Setting
