refactor: restructure for better ai comprehension

src/components/ui/Button.tsx

@@ -1,17 +1,50 @@
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   isLoading?: boolean;
+  variant?: 'primary' | 'secondary' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
 }
 
-export function Button({ children, className = "", isLoading = false, ...props }: ButtonProps) {
+export function Button({ 
+  children, 
+  className = "", 
+  isLoading = false, 
+  variant = 'primary',
+  size = 'md',
+  ...props 
+}: ButtonProps) {
+  const baseClasses = "btn";
+  
+  const variantClasses = {
+    primary: "btn-primary",
+    secondary: "btn-secondary", 
+    outline: "btn-outline"
+  };
+  
+  const sizeClasses = {
+    sm: "px-3 py-1.5 text-xs",
+    md: "px-4 py-2 text-sm",
+    lg: "px-6 py-3 text-base"
+  };
+
+  const fullWidthClasses = "w-full max-w-xs mx-auto block";
+  
+  const combinedClasses = [
+    baseClasses,
+    variantClasses[variant],
+    sizeClasses[size],
+    fullWidthClasses,
+    className
+  ].join(' ');
+
   return (
     <button
-      className={`w-full max-w-xs mx-auto block bg-[#7C65C1] text-white py-3 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-[#7C65C1] hover:bg-[#6952A3] ${className}`}
+      className={combinedClasses}
       {...props}
     >
       {isLoading ? (
         <div className="flex items-center justify-center">
-          <div className="animate-spin h-5 w-5 border-2 border-white border-t-transparent rounded-full" />
+          <div className="spinner-primary h-5 w-5" />
         </div>
       ) : (
         children