'use client';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import type React from 'react';
import { useAsyncFn } from '@/hooks/tools';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';

export default function ChatButton({
  id,
  ...props
}: { id: string } & React.ComponentProps<'button'>) {
  const router = useRouter();
  const createChannel = useStreamChatStore((s) => s.createChannel);

  const { loading, run: createChannelAndPush } = useAsyncFn(async () => {
    const channelId = await createChannel(id);
    if (!channelId) return;
    router.push(`/chat/${channelId}`);
  });

  return (
    <Button loading={loading} onClick={() => createChannelAndPush()} variant="primary" {...props}>
      Chat
    </Button>
  );
}
