Button Group

"use client";

import * as React from "react";

import { ButtonGroupInputGroup } from "@/components/ui/button-group-input-group";

export function ButtonGroupInputGroupDemo() {
  const [messages, setMessages] = React.useState<
    Array<{ type: string; content: string; timestamp: Date }>
  >([]);

  const handleSendMessage = (message: string) => {
    setMessages((prev) => [
      ...prev,
      { type: "text", content: message, timestamp: new Date() },
    ]);
  };

  const handleFileSelect = (file: File) => {
    setMessages((prev) => [
      ...prev,
      { type: "file", content: file.name, timestamp: new Date() },
    ]);
  };

  const handleAudioRecord = (audioBlob: Blob) => {
    setMessages((prev) => [
      ...prev,
      {
        type: "audio",
        content: `Audio recording (${Math.round(audioBlob.size / 1024)}KB)`,
        timestamp: new Date(),
      },
    ]);
  };

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <h3 className="font-medium text-sm">ButtonGroupInputGroup</h3>
        <p className="text-muted-foreground text-xs">
          A comprehensive input component with text, file upload, and voice
          recording capabilities.
        </p>
      </div>

      <div className="space-y-3">
        <ButtonGroupInputGroup
          onAudioRecord={handleAudioRecord}
          onFileSelect={handleFileSelect}
          onSendMessage={handleSendMessage}
        />

        {messages.length > 0 && (
          <div className="space-y-2">
            <div className="font-medium text-muted-foreground text-xs">
              Messages:
            </div>
            <div className="max-h-32 space-y-1 overflow-y-auto">
              {messages.map((message, index) => (
                <div className="rounded-md bg-muted p-2 text-xs" key={index}>
                  <div className="flex items-center gap-2">
                    <span className="font-medium capitalize">
                      {message.type}:
                    </span>
                    <span>{message.content}</span>
                  </div>
                  <div className="mt-1 text-muted-foreground text-xs">
                    {message.timestamp.toLocaleTimeString()}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}