import { ChangeEventHandler } from "react";

export default function PriceToggle({
  isAnnual,
  onChange,
}: {
  isAnnual: boolean;
  onChange?: ChangeEventHandler<HTMLInputElement>;
}) {
  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>
    </>
  );
}