"use client";

import * as React from "react";
import { LoadingButton } from "./loading-button";

export function LoadingButtonDemo() {
  const [isLoading, setIsLoading] = React.useState<Record<string, boolean>>({
    default: false,
    outline: false,
    secondary: false,
    destructive: false,
    ghost: false,
    link: false,
  });

  const handleClick = (variant: string) => {
    setIsLoading((prev) => ({ ...prev, [variant]: true }));

    // Simulate API call
    setTimeout(() => {
      setIsLoading((prev) => ({ ...prev, [variant]: false }));
    }, 2000);
  };

  return (
    <div className="flex flex-col space-y-8">
      <div className="space-y-2">
        <h3 className="text-lg font-medium">Default Variants</h3>
        <div className="flex flex-wrap gap-4">
          <LoadingButton
            loading={isLoading.default}
            onClick={() => handleClick("default")}
          >
            Default
          </LoadingButton>

          <LoadingButton
            variant="outline"
            loading={isLoading.outline}
            onClick={() => handleClick("outline")}
          >
            Outline
          </LoadingButton>

          <LoadingButton
            variant="secondary"
            loading={isLoading.secondary}
            onClick={() => handleClick("secondary")}
          >
            Secondary
          </LoadingButton>

          <LoadingButton
            variant="destructive"
            loading={isLoading.destructive}
            onClick={() => handleClick("destructive")}
          >
            Destructive
          </LoadingButton>

          <LoadingButton
            variant="ghost"
            loading={isLoading.ghost}
            onClick={() => handleClick("ghost")}
          >
            Ghost
          </LoadingButton>

          <LoadingButton
            variant="link"
            loading={isLoading.link}
            onClick={() => handleClick("link")}
          >
            Link
          </LoadingButton>
        </div>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-medium">Size Variants</h3>
        <div className="flex items-center gap-4">
          <LoadingButton size="sm" variant="outline">
            Small
          </LoadingButton>

          <LoadingButton size="default" variant="outline">
            Default
          </LoadingButton>

          <LoadingButton size="lg" variant="outline">
            Large
          </LoadingButton>

          <LoadingButton size="icon" variant="outline">
            <span className="h-4 w-4">+</span>
          </LoadingButton>
        </div>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-medium">Always Loading</h3>
        <div className="flex items-center gap-4">
          <LoadingButton loading>Always Loading</LoadingButton>

          <LoadingButton variant="secondary" loading>
            Processing
          </LoadingButton>

          <LoadingButton variant="outline" loading>
            Please wait
          </LoadingButton>
        </div>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-medium">Disabled State</h3>
        <div className="flex items-center gap-4">
          <LoadingButton disabled>Disabled</LoadingButton>

          <LoadingButton variant="outline" disabled loading>
            Disabled + Loading
          </LoadingButton>
        </div>
      </div>
    </div>
  );
}