import { component$, useStylesScoped$, Slot } from "@builder.io/qwik";

export interface ButtonProps {
  size?: "small" | "medium" | "large";
}
export const Button = component$<ButtonProps>(({ size = "medium" }) => {
  useStylesScoped$(`
    .size-small {
      font-size: 10px;
    }
    .size-medium {
      font-size: 14px;
    }
    .size-large {
      font-size: 18px;
    }
  `);
  return (
    <button
      class={{
        [`size-${size}`]: true,
      }}
    >
      <Slot></Slot>
    </button>
  );
});