export default function PriceToggle({ isAnnual, onChange }) {
    return (
      <>
        <label className="shadow-card relative inline-flex cursor-pointer select-none items-center justify-center rounded-lg bg-base-100 p-1">
          <input
            type="checkbox"
            className="sr-only"
            checked={isAnnual}
            onChange={onChange}
          />
          <span
            className={`flex items-center space-x-[6px] rounded py-2 px-[18px] text-sm font-medium ${
              !isAnnual ? " bg-secondary" : "text-secondary-content"
            }`}
          >
            Monthly Billing
          </span>
          <span
            className={`flex items-center space-x-[6px] rounded py-2 px-[18px] text-sm font-medium ${
              isAnnual ? " bg-secondary" : "text-secondary-content"
            }`}
          >
            Yearly Billing
          </span>
        </label>
      </>
    )
  }