function TestComponent() {
  const [count, setCount] = React.useState(0);
  
  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
      <p>Click the button to test interactivity</p>
    </div>
  );
}

export function numberFormat(number:number | string){
    let convertedNumber:number = Number(number)
     convertedNumber:number = convertedNumber.toFixed(2)
    const stringNumber = String(number)
    return stringNumber.length > 0 ? new Intl.NumberFormat("en-US").format(convertedNumber): stringNumber
}

console.log(numberFormat(100000))

import { useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { createSnippet, getSnippetById, updateSnippet } from '@/lib/actions/snippets.actions';
import type { Snippet } from '@/types/snippets';

export const useSnippetEditor = (id?: string) => {
  const isNew = id === 'new' || !id;
  const router = useRouter();
  const supabase = createClientComponentClient();

  const [state, setState] = useState({
    title: '',
    description: '',
    code: '',
    tags: '',
    isPremium: false,
    isLoading: !isNew,
    isRunning: false,
  });

  const fetchSnippet = useCallback(async () => {
    if (isNew || !id) return;

    try {
      setState(prev => ({ ...prev, isLoading: true }));
      const { snippet } = await getSnippetById(id);

      if (snippet) {
        setState({
          title: snippet.title || '',
          description: snippet.description || '',
          code: snippet.code || '',
          tags: snippet.tags?.join(', ') || '',
          isPremium: snippet.isPremium || false,
          isLoading: false,
          isRunning: false,
        });
        return snippet;
      }
    } catch (error) {
      console.error('Failed to fetch snippet:', error);
      toast.error('Failed to load snippet');
    } finally {
      setState(prev => ({ ...prev, isLoading: false }));
    }
  }, [id, isNew]);

  const handleSave = useCallback(
    async (editorCode: string, language: string) => {
      try {
        setState(prev => ({ ...prev, isRunning: true }));

        const { title, description, tags, isPremium } = state;

        if (!title.trim()) {
          toast.error('Title is required');
          return;
        }
        if (!description.trim()) {
          toast.error('Description is required');
          return;
        }
        if (!editorCode.trim()) {
          toast.error('Code is required');
          return;
        }

        const { data: { session } } = await supabase.auth.getSession();
        if (!session) {
          toast.error('You must be logged in to save snippets');
          return;
        }

        const processedTags = tags
          .split(',')
          .map(tag => tag.trim())
          .filter(tag => tag.length > 0);

        const snippetData = {
          title: title.trim(),
          description: description.trim(),
          code: editorCode,
          language,
          isPublic: !isPremium,
          isPremium,
          tags: processedTags,
          status: 'ACTIVE' as const,
        };

        if (isNew) {
          const { data, error } = await createSnippet(snippetData);
          if (error || !data) throw error || new Error('No data returned');
          toast.success('Snippet created successfully');
          router.push(`/dashboard/snippets/${data[0].id}`);
        } else {
          const { snippet, error } = await updateSnippet(id, snippetData);
          if (error) throw error;
          toast.success('Snippet updated successfully');
          router.push(`/dashboard/snippets/${snippet.id}`);
        }
      } catch (error) {
        console.error('Save error:', error);
        toast.error('Failed to save snippet');
      } finally {
        setState(prev => ({ ...prev, isRunning: false }));
      }
    },
    [state, id, isNew, router, supabase.auth]
  );

  const handleChange = useCallback((field: keyof typeof state, value: any) => {
    setState(prev => ({ ...prev, [field]: value }));
  }, []);

  return {
    ...state,
    isNew,
    fetchSnippet,
    handleSave,
    handleChange,
  };
};