SBButton

import { Button } from "@/components/ui/sbbutton";
import React from "react"
import { Star, Loader, RefreshCw } from "lucide-react"

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 (Default)</h2>
          <div className="grid grid-cols-8 gap-2 items-center">
            {/* Fill Primary States - usando variant="default" */}
            <Button variant="default">Button</Button>
            <Button variant="default">Button <Star className="w-4 h-4" /></Button>
            <Button variant="default"><Star className="w-4 h-4" /> Button</Button>
            <Button variant="default" size="icon"><Star className="w-4 h-4" /></Button>
                         <Button variant="default" loading loadingIconPosition="left"></Button>
             <Button variant="default" loading loadingIconPosition="right">Button</Button>
             <Button variant="default" loading loadingAnimation loadingText="Button">Button</Button>
            <Button variant="default" disabled>Button</Button>
            
            {/* Stroke Primary States - usando variant="outline" */}
            <Button variant="outline">Button</Button>
            <Button variant="outline">Button <Star className="w-4 h-4" /></Button>
            <Button variant="outline"><Star className="w-4 h-4" /> Button</Button>
            <Button variant="outline" size="icon"><Star className="w-4 h-4" /></Button>
                         <Button variant="outline" loading loadingIconPosition="left"></Button>
             <Button variant="outline" loading loadingIconPosition="left">Button</Button>
             <Button variant="outline" loading loadingAnimation loadingText="Button">Button</Button>
            <Button variant="outline" disabled>Button</Button>
            
            {/* Text Primary States - usando variant="ghost" */}
            <Button variant="ghost">Button</Button>
            <Button variant="ghost">Button <Star className="w-4 h-4" /></Button>
            <Button variant="ghost"><Star className="w-4 h-4" /> Button</Button>
            <Button variant="ghost" size="icon"><Star className="w-4 h-4" /></Button>
            <Button variant="ghost" loading></Button>
            <Button variant="ghost" loading>Button</Button>
            <Button variant="ghost" loading loadingText="Button">Button</Button>
            <Button variant="ghost" disabled>Button</Button>
          </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 - usando variant="secondary" */}
            <Button variant="secondary">Button</Button>
            <Button variant="secondary">Button <Star className="w-4 h-4" /></Button>
            <Button variant="secondary"><Star className="w-4 h-4" /> Button</Button>
            <Button variant="secondary" size="icon"><Star className="w-4 h-4" /></Button>
                         <Button variant="secondary" loading loadingIconPosition="right"></Button>
             <Button variant="secondary" loading loadingIconPosition="left">Button</Button>
             <Button variant="secondary" loading loadingIconPosition="right" loadingText="Button">Button</Button>
            <Button variant="secondary" disabled>Button</Button>
            
            {/* Stroke Secondary States - combinación outline + secondary styling */}
            <Button variant="outline" className="border-secondary text-secondary hover:bg-secondary/10">Button</Button>
            <Button variant="outline" className="border-secondary text-secondary hover:bg-secondary/10">Button <Star className="w-4 h-4" /></Button>
            <Button variant="outline" className="border-secondary text-secondary hover:bg-secondary/10"><Star className="w-4 h-4" /> Button</Button>
            <Button variant="outline" size="icon" className="border-secondary text-secondary hover:bg-secondary/10"><Star className="w-4 h-4" /></Button>
            <Button variant="outline" loading className="border-secondary text-secondary hover:bg-secondary/10"></Button>
            <Button variant="outline" loading className="border-secondary text-secondary hover:bg-secondary/10">Button</Button>
            <Button variant="outline" loading loadingText="Button" className="border-secondary text-secondary hover:bg-secondary/10">Button</Button>
            <Button variant="outline" disabled className="border-secondary text-secondary hover:bg-secondary/10">Button</Button>
            
            {/* Text Secondary States - ghost con colores secondary */}
            <Button variant="ghost" className="text-secondary hover:bg-secondary/10">Button</Button>
            <Button variant="ghost" className="text-secondary hover:bg-secondary/10">Button <Star className="w-4 h-4" /></Button>
            <Button variant="ghost" className="text-secondary hover:bg-secondary/10"><Star className="w-4 h-4" /> Button</Button>
            <Button variant="ghost" size="icon" className="text-secondary hover:bg-secondary/10"><Star className="w-4 h-4" /></Button>
            <Button variant="ghost" loading className="text-secondary hover:bg-secondary/10"></Button>
            <Button variant="ghost" loading className="text-secondary hover:bg-secondary/10">Button</Button>
            <Button variant="ghost" loading loadingText="Button" className="text-secondary hover:bg-secondary/10">Button</Button>
            <Button variant="ghost" disabled className="text-secondary hover:bg-secondary/10">Button</Button>
          </div>
        </section>

        {/* Tertiary Variants */}
        <section className="space-y-4">
          <h2 className="text-xl font-semibold text-purple-600">Tertiary (Muted)</h2>
          <div className="grid grid-cols-8 gap-2 items-center">
            {/* Fill Tertiary States - usando clases personalizadas para tertiary */}
            <Button className="bg-muted text-muted-foreground hover:bg-muted/80">Button</Button>
            <Button className="bg-muted text-muted-foreground hover:bg-muted/80">Button <Star className="w-4 h-4" /></Button>
            <Button className="bg-muted text-muted-foreground hover:bg-muted/80"><Star className="w-4 h-4" /> Button</Button>
            <Button size="icon" className="bg-muted text-muted-foreground hover:bg-muted/80"><Star className="w-4 h-4" /></Button>
            <Button loading className="bg-muted text-muted-foreground hover:bg-muted/80"></Button>
            <Button loading className="bg-muted text-muted-foreground hover:bg-muted/80">Button</Button>
            <Button loading loadingText="Button" className="bg-muted text-muted-foreground hover:bg-muted/80">Button</Button>
            <Button disabled className="bg-muted text-muted-foreground hover:bg-muted/80">Button</Button>
            
            {/* Stroke Tertiary States */}
            <Button variant="outline" className="border-muted text-muted-foreground hover:bg-muted/10">Button</Button>
            <Button variant="outline" className="border-muted text-muted-foreground hover:bg-muted/10">Button <Star className="w-4 h-4" /></Button>
            <Button variant="outline" className="border-muted text-muted-foreground hover:bg-muted/10"><Star className="w-4 h-4" /> Button</Button>
            <Button variant="outline" size="icon" className="border-muted text-muted-foreground hover:bg-muted/10"><Star className="w-4 h-4" /></Button>
            <Button variant="outline" loading className="border-muted text-muted-foreground hover:bg-muted/10"></Button>
            <Button variant="outline" loading className="border-muted text-muted-foreground hover:bg-muted/10">Button</Button>
            <Button variant="outline" loading loadingText="Button" className="border-muted text-muted-foreground hover:bg-muted/10">Button</Button>
            <Button variant="outline" disabled className="border-muted text-muted-foreground hover:bg-muted/10">Button</Button>
            
            {/* Text Tertiary States */}
            <Button variant="ghost" className="text-muted-foreground hover:bg-muted/10">Button</Button>
            <Button variant="ghost" className="text-muted-foreground hover:bg-muted/10">Button <Star className="w-4 h-4" /></Button>
            <Button variant="ghost" className="text-muted-foreground hover:bg-muted/10"><Star className="w-4 h-4" /> Button</Button>
            <Button variant="ghost" size="icon" className="text-muted-foreground hover:bg-muted/10"><Star className="w-4 h-4" /></Button>
            <Button variant="ghost" loading className="text-muted-foreground hover:bg-muted/10"></Button>
            <Button variant="ghost" loading className="text-muted-foreground hover:bg-muted/10">Button</Button>
            <Button variant="ghost" loading loadingText="Button" className="text-muted-foreground hover:bg-muted/10">Button</Button>
            <Button variant="ghost" disabled className="text-muted-foreground hover:bg-muted/10">Button</Button>
          </div>
        </section>

        {/* Error Variants */}
        <section className="space-y-4">
          <h2 className="text-xl font-semibold text-red-600">Error (Destructive)</h2>
          <div className="grid grid-cols-8 gap-2 items-center">
            {/* Fill Error States - usando variant="destructive" */}
            <Button variant="destructive">Button</Button>
            <Button variant="destructive">Button <Star className="w-4 h-4" /></Button>
            <Button variant="destructive"><Star className="w-4 h-4" /> Button</Button>
            <Button variant="destructive" size="icon"><Star className="w-4 h-4" /></Button>
            <Button variant="destructive" loading></Button>
            <Button variant="destructive" loading>Button</Button>
            <Button variant="destructive" loading loadingText="Button">Button</Button>
            <Button variant="destructive" disabled>Button</Button>
            
            {/* Stroke Error States - outline con colores destructive */}
            <Button variant="outline" className="border-destructive text-destructive hover:bg-destructive/10">Button</Button>
            <Button variant="outline" className="border-destructive text-destructive hover:bg-destructive/10">Button <Star className="w-4 h-4" /></Button>
            <Button variant="outline" className="border-destructive text-destructive hover:bg-destructive/10"><Star className="w-4 h-4" /> Button</Button>
            <Button variant="outline" size="icon" className="border-destructive text-destructive hover:bg-destructive/10"><Star className="w-4 h-4" /></Button>
            <Button variant="outline" loading className="border-destructive text-destructive hover:bg-destructive/10"></Button>
            <Button variant="outline" loading className="border-destructive text-destructive hover:bg-destructive/10">Button</Button>
            <Button variant="outline" loading loadingText="Button" className="border-destructive text-destructive hover:bg-destructive/10">Button</Button>
            <Button variant="outline" disabled className="border-destructive text-destructive hover:bg-destructive/10">Button</Button>
            
            {/* Text Error States - ghost con colores destructive */}
            <Button variant="ghost" className="text-destructive hover:bg-destructive/10">Button</Button>
            <Button variant="ghost" className="text-destructive hover:bg-destructive/10">Button <Star className="w-4 h-4" /></Button>
            <Button variant="ghost" className="text-destructive hover:bg-destructive/10"><Star className="w-4 h-4" /> Button</Button>
            <Button variant="ghost" size="icon" className="text-destructive hover:bg-destructive/10"><Star className="w-4 h-4" /></Button>
            <Button variant="ghost" loading className="text-destructive hover:bg-destructive/10"></Button>
            <Button variant="ghost" loading className="text-destructive hover:bg-destructive/10">Button</Button>
            <Button variant="ghost" loading loadingText="Button" className="text-destructive hover:bg-destructive/10">Button</Button>
            <Button variant="ghost" disabled className="text-destructive hover:bg-destructive/10">Button</Button>
          </div>
                 </section>

         {/* Loading Animation Examples */}
         <section className="space-y-4">
           <h2 className="text-xl font-semibold text-blue-600">Loading Animation Examples</h2>
           <div className="space-y-4">
             <div className="flex flex-wrap gap-4 items-center">
               <div className="text-sm font-medium">Simple Loading:</div>
               <Button loading>Loading...</Button>
               <Button loading variant="secondary">Processing</Button>
               <Button loading variant="outline">Uploading</Button>
             </div>
             
             <div className="flex flex-wrap gap-4 items-center">
               <div className="text-sm font-medium">Loading + Animation:</div>
               <Button loading loadingAnimation>Loading...</Button>
               <Button loading loadingAnimation variant="secondary">Processing</Button>
               <Button loading loadingAnimation variant="outline">Uploading</Button>
             </div>
             
             <div className="flex flex-wrap gap-4 items-center">
               <div className="text-sm font-medium">Custom Loading Icon:</div>
               <Button loading loadingIcon={<RefreshCw className="animate-spin" />}>Refreshing</Button>
               <Button loading loadingAnimation loadingIcon={<Loader className="animate-pulse" />}>Syncing</Button>
             </div>
             
             <div className="flex flex-wrap gap-4 items-center">
               <div className="text-sm font-medium">Loading Icon Position:</div>
               <Button loading loadingIconPosition="left">Save Left</Button>
               <Button loading loadingIconPosition="right">Save Right</Button>
               <Button loading loadingAnimation loadingIconPosition="right">Animate Right</Button>
             </div>
             
             <div className="flex flex-wrap gap-4 items-center">
               <div className="text-sm font-medium">Loading Icon-Only (no label):</div>
               <Button loading />
               <Button loading loadingAnimation />
               <Button loading variant="secondary" />
               <Button loading variant="outline" />
               <Button loading variant="destructive" />
               <div className="text-xs text-muted-foreground ml-2">↑ Auto-converts to square icon buttons</div>
             </div>
           </div>
         </section>
       </div>
     </div>
  )
}