Micro Expander

'use client';

import React, { useState } from 'react';
import { MicroExpander } from '@/components/ui/micro-expander';
import { Save, Check } from 'lucide-react';

export default function MicroExpanderLoading() {
const [isLoading, setIsLoading] = useState(false);
const [isSuccess, setIsSuccess] = useState(false);

const handleSave = () => {
  setIsLoading(true);
  // Simulate an API call
  setTimeout(() => {
    setIsLoading(false);
    setIsSuccess(true);
    // Reset after showing success state
    setTimeout(() => setIsSuccess(false), 2000);
  }, 2000);
};

return (
  <div className="w-full min-h-[200px] flex flex-col items-center justify-center gap-4">
    <div className="text-sm text-muted-foreground mb-2">
      Click to simulate a save operation
    </div>
    
    <MicroExpander
      text={isSuccess ? 'Saved!' : 'Save Changes'}
      variant={isSuccess ? 'outline' : 'default'}
      icon={isSuccess ? <Check className="w-5 h-5" /> : <Save className="w-5 h-5" />}
      isLoading={isLoading}
      onClick={handleSave}
      className={isSuccess ? "text-green-600 border-green-600 hover:border-green-600 bg-green-50" : ""}
    />
  </div>
);
}