import classNames from "classnames";
import React from "react";
import { ReactComponent as Checkmark } from "assets/svg/check.svg";

export type Props = {
  /**
   * An Element next to the Radio
   */
  children?: React.ReactNode;
} & Omit<React.HTMLProps<HTMLInputElement>, "type">;

const Radio = ({ children, className, ...props }: Props) => {
  return (
    <label
      className={classNames(
        " group inline-flex gap-x-4 text-base select-none",
        className
      )}
      htmlFor={props.id}
    >
      <input className="hidden peer" type="radio" {...props} />
      <div
        className=" w-6 h-6 rounded-full box-border p-0.5 border-2 border-gray-300
                    peer-checked:border-blue-500
                    group-hover:border-blue-500
                    
                    transition-all
                    
                    after:content-[''] after:w-full after:h-full after:block after:bg-blue-500 
                    after:rounded-full after:scale-0 after:peer-checked:scale-100 duration-200

                    peer-disabled:border-gray-300 peer-disabled:bg-gray-75/5
                    after:peer-disabled:bg-[#8C8C8C]

                    hover:border-blue-500"
      ></div>
      {children}
    </label>
  );
};
export default Radio;