import { useState } from "react";

export default function ToggleRow({ label, enabled }) {
  const [checked, setChecked] = useState(enabled);

  return (
    <div className="flex items-center justify-between gap-4 rounded-[14px] border border-line bg-surface p-4">
      <span className="min-w-0 text-[14px] font-bold">{label}</span>
      <button
        className={`mini-switch ${checked ? "is-on" : ""}`}
        aria-label={label}
        aria-pressed={checked}
        onClick={() => setChecked((value) => !value)}
      >
        <span />
      </button>
    </div>
  );
}
