'use client';

import * as React from 'react';
import { FileAudio, X } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { formatFileSize, formatDuration } from '@/lib/audio/decoder';
import { cn } from '@/lib/utils/cn';

export interface AudioInfoProps {
  fileName: string;
  audioBuffer: AudioBuffer;
  onClear?: () => void;
  className?: string;
}

export function AudioInfo({ fileName, audioBuffer, onClear, className }: AudioInfoProps) {
  const fileSize = audioBuffer.length * audioBuffer.numberOfChannels * 4; // Approximate size in bytes

  return (
    <Card className={cn('', className)}>
      <CardContent className="p-4">
        <div className="flex items-start gap-3">
          <FileAudio className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />

          <div className="flex-1 min-w-0 space-y-2">
            <div className="flex items-start justify-between gap-2">
              <div className="min-w-0 flex-1">
                <h3 className="font-medium text-foreground truncate" title={fileName}>
                  {fileName}
                </h3>
              </div>
              {onClear && (
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={onClear}
                  className="h-8 w-8 flex-shrink-0"
                  title="Clear audio"
                >
                  <X className="h-4 w-4" />
                </Button>
              )}
            </div>

            <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-muted-foreground">
              <div>
                <span className="font-medium">Duration:</span>{' '}
                {formatDuration(audioBuffer.duration)}
              </div>
              <div>
                <span className="font-medium">Sample Rate:</span>{' '}
                {audioBuffer.sampleRate.toLocaleString()} Hz
              </div>
              <div>
                <span className="font-medium">Channels:</span>{' '}
                {audioBuffer.numberOfChannels === 1 ? 'Mono' : audioBuffer.numberOfChannels === 2 ? 'Stereo' : `${audioBuffer.numberOfChannels} channels`}
              </div>
              <div>
                <span className="font-medium">Size:</span>{' '}
                {formatFileSize(fileSize)}
              </div>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}