import React from "react";

export const Switch = ({ checked = false, onChange, className = "" }) => (
  <label className={`inline-flex items-center cursor-pointer ${className}`}>
    <input
      type="checkbox"
      className="sr-only"
      checked={checked}
      onChange={(e) => onChange?.(e.target.checked)}
    />
    <span className="relative w-10 h-5 bg-gray-400 rounded-full transition">
      <span
        className={`absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full transition-transform ${
          checked ? "translate-x-5" : ""
        }`}
      />
    </span>
  </label>
);