Primary Button

import React from "@rbxts/react";
import { useTheme } from "@robloxui/theme";

interface PrimaryButtonProps {
  text: string;
  onClick: () => void;
  disabled?: boolean;
  size?: "sm" | "md" | "lg";
}

export function PrimaryButton({ text, onClick, disabled = false, size = "md" }: PrimaryButtonProps) {
  const { colors, spacing } = useTheme();

  const sizeStyles = {
    sm: { padding: `${spacing.xs}px ${spacing.sm}px`, fontSize: 14 },
    md: { padding: `${spacing.sm}px ${spacing.md}px`, fontSize: 16 },
    lg: { padding: `${spacing.md}px ${spacing.lg}px`, fontSize: 18 },
  };

  return (
    <textbutton
      Text={text}
      BackgroundColor3={disabled ? colors.secondary : colors.primary}
      TextColor3={colors.textPrimary}
      AutoButtonColor={!disabled}
      Event={{ Activated: disabled ? undefined : onClick }}
      Size={new UDim2(0, 0, 0, 0)}
      AutomaticSize={"XY"}
    >
      <uipadding
        PaddingTop={new UDim(0, sizeStyles[size].padding)}
        PaddingBottom={new UDim(0, sizeStyles[size].padding)}
        PaddingLeft={new UDim(0, sizeStyles[size].padding)}
        PaddingRight={new UDim(0, sizeStyles[size].padding)}
      />
      <uicorner CornerRadius={new UDim(0, 8)} />
    </textbutton>
  );
}