RbButton

import { RbButton } from "@/components/ui/rb-button";

export default function DemoOne() {
  return <div className="p-8 space-y-8 bg-background">
      <div className="space-y-6">
        <h1 className="text-3xl font-bold text-foreground">Button Component States</h1>
        
        {/* Primary Variants */}
        <section className="space-y-4">
          <h2 className="text-xl font-semibold text-purple-600">Primary</h2>
          <div className="grid grid-cols-8 gap-2 items-center">
            {/* Fill Primary States */}
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "primary" }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "primary", icon: "fas fa-star", iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "primary", icon: "fas fa-star", iconPosition: "left" }} />
            <RbButton custom={{ icon: "fas fa-star", styleBtn: "fill", typeBtn: "primary" }} />
            <RbButton custom={{ styleBtn: "fill", typeBtn: "primary", loading: true, loadingAnimation: false }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "primary", loading: true, loadingAnimation: false, iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "primary", loading: true, loadingAnimation: true }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "primary", disabled: true }} />
            
            {/* Stroke Primary States */}
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "primary" }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "primary", icon: "fas fa-star", iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "primary", icon: "fas fa-star", iconPosition: "left" }} />
            <RbButton custom={{ icon: "fas fa-star", styleBtn: "stroke", typeBtn: "primary" }} />
            <RbButton custom={{ styleBtn: "stroke", typeBtn: "primary", loading: true, loadingAnimation: false }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "primary", loading: true, loadingAnimation: false, iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "primary", loading: true, loadingAnimation: true }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "primary", disabled: true }} />
            
            {/* Text Primary States */}
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "primary" }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "primary", icon: "fas fa-star", iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "primary", icon: "fas fa-star", iconPosition: "left" }} />
            <RbButton custom={{ icon: "fas fa-star", styleBtn: "text", typeBtn: "primary" }} />
            <RbButton custom={{ styleBtn: "text", typeBtn: "primary", loading: true, loadingAnimation: false }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "primary", loading: true, loadingAnimation: false, iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "primary", loading: true, loadingAnimation: true }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "primary", disabled: true }} />
          </div>
        </section>

        {/* Secondary Variants */}
        <section className="space-y-4">
          <h2 className="text-xl font-semibold text-purple-600">Secondary</h2>
          <div className="grid grid-cols-8 gap-2 items-center">
            {/* Fill Secondary States */}
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "secondary" }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "secondary", icon: "fas fa-star", iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "secondary", icon: "fas fa-star", iconPosition: "left" }} />
            <RbButton custom={{ icon: "fas fa-star", styleBtn: "fill", typeBtn: "secondary" }} />
            <RbButton custom={{ styleBtn: "fill", typeBtn: "secondary", loading: true, loadingAnimation: false }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "secondary", loading: true, loadingAnimation: false, iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "secondary", loading: true, loadingAnimation: true }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "secondary", disabled: true }} />
            
            {/* Stroke Secondary States */}
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "secondary" }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "secondary", icon: "fas fa-star", iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "secondary", icon: "fas fa-star", iconPosition: "left" }} />
            <RbButton custom={{ icon: "fas fa-star", styleBtn: "stroke", typeBtn: "secondary" }} />
            <RbButton custom={{ styleBtn: "stroke", typeBtn: "secondary", loading: true, loadingAnimation: false }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "secondary", loading: true, loadingAnimation: false, iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "secondary", loading: true, loadingAnimation: true }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "secondary", disabled: true }} />
            
            {/* Text Secondary States */}
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "secondary" }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "secondary", icon: "fas fa-star", iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "secondary", icon: "fas fa-star", iconPosition: "left" }} />
            <RbButton custom={{ icon: "fas fa-star", styleBtn: "text", typeBtn: "secondary" }} />
            <RbButton custom={{ styleBtn: "text", typeBtn: "secondary", loading: true, loadingAnimation: false }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "secondary", loading: true, loadingAnimation: false, iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "secondary", loading: true, loadingAnimation: true }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "secondary", disabled: true }} />
          </div>
        </section>

        {/* Tertiary Variants */}
        <section className="space-y-4">
          <h2 className="text-xl font-semibold text-purple-600">Tertiary</h2>
          <div className="grid grid-cols-8 gap-2 items-center">
            {/* Fill Tertiary States */}
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "tertiary" }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "tertiary", icon: "fas fa-star", iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "tertiary", icon: "fas fa-star", iconPosition: "left" }} />
            <RbButton custom={{ icon: "fas fa-star", styleBtn: "fill", typeBtn: "tertiary" }} />
            <RbButton custom={{ styleBtn: "fill", typeBtn: "tertiary", loading: true, loadingAnimation: false }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "tertiary", loading: true, loadingAnimation: false, iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "tertiary", loading: true, loadingAnimation: true }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "tertiary", disabled: true }} />
            
            {/* Stroke Tertiary States */}
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "tertiary" }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "tertiary", icon: "fas fa-star", iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "tertiary", icon: "fas fa-star", iconPosition: "left" }} />
            <RbButton custom={{ icon: "fas fa-star", styleBtn: "stroke", typeBtn: "tertiary" }} />
            <RbButton custom={{ styleBtn: "stroke", typeBtn: "tertiary", loading: true, loadingAnimation: false }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "tertiary", loading: true, loadingAnimation: false, iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "tertiary", loading: true, loadingAnimation: true }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "tertiary", disabled: true }} />
            
            {/* Text Tertiary States */}
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "tertiary" }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "tertiary", icon: "fas fa-star", iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "tertiary", icon: "fas fa-star", iconPosition: "left" }} />
            <RbButton custom={{ icon: "fas fa-star", styleBtn: "text", typeBtn: "tertiary" }} />
            <RbButton custom={{ styleBtn: "text", typeBtn: "tertiary", loading: true, loadingAnimation: false }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "tertiary", loading: true, loadingAnimation: false, iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "tertiary", loading: true, loadingAnimation: true }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "tertiary", disabled: true }} />
          </div>
        </section>

        {/* Error Variants */}
        <section className="space-y-4">
          <h2 className="text-xl font-semibold text-red-600">Error</h2>
          <div className="grid grid-cols-8 gap-2 items-center">
            {/* Fill Error States */}
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "error" }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "error", icon: "fas fa-star", iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "error", icon: "fas fa-star", iconPosition: "left" }} />
            <RbButton custom={{ icon: "fas fa-star", styleBtn: "fill", typeBtn: "error" }} />
            <RbButton custom={{ styleBtn: "fill", typeBtn: "error", loading: true, loadingAnimation: false }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "error", loading: true, loadingAnimation: false, iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "error", loading: true, loadingAnimation: true }} />
            <RbButton custom={{ label: "Button", styleBtn: "fill", typeBtn: "error", disabled: true }} />
            
            {/* Stroke Error States */}
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "error" }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "error", icon: "fas fa-star", iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "error", icon: "fas fa-star", iconPosition: "left" }} />
            <RbButton custom={{ icon: "fas fa-star", styleBtn: "stroke", typeBtn: "error" }} />
            <RbButton custom={{ styleBtn: "stroke", typeBtn: "error", loading: true, loadingAnimation: false }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "error", loading: true, loadingAnimation: false, iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "error", loading: true, loadingAnimation: true }} />
            <RbButton custom={{ label: "Button", styleBtn: "stroke", typeBtn: "error", disabled: true }} />
            
            {/* Text Error States */}
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "error" }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "error", icon: "fas fa-star", iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "error", icon: "fas fa-star", iconPosition: "left" }} />
            <RbButton custom={{ icon: "fas fa-star", styleBtn: "text", typeBtn: "error" }} />
            <RbButton custom={{ styleBtn: "text", typeBtn: "error", loading: true, loadingAnimation: false }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "error", loading: true, loadingAnimation: false, iconPosition: "right" }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "error", loading: true, loadingAnimation: true }} />
            <RbButton custom={{ label: "Button", styleBtn: "text", typeBtn: "error", disabled: true }} />
          </div>
        </section>
      </div>
    </div>
}