import React from 'react';
import { View } from 'react-native';

import { composerStyles } from '../conversation/composerStyles';
import { FileAttachment } from './FileAttachment';
import { fileTypeFromUrl, getAttachmentName, isImageAttachment } from './mediaUtils';
import type { SuperagentMediaAttachment } from '../../types';

export function AttachmentPreviewStrip({
  attachments,
  onRemove,
}: {
  attachments: SuperagentMediaAttachment[];
  onRemove: (index: number) => void;
}) {
  if (attachments.length === 0) return null;

  return (
    <View style={composerStyles.attachmentStrip}>
      {attachments.map((attachment, index) => {
        // Classify once: prefer the attachment's own kind/mimeType (handles
        // images with an extensionless URL), fall back to the URL for the chip
        // icon — so `variant` and `fileType` can't disagree.
        const isImage = isImageAttachment(attachment);
        return (
          <FileAttachment
            key={attachment.id ?? `${attachment.url}-${index}`}
            variant={isImage ? 'image' : 'file'}
            fileType={isImage ? 'image' : fileTypeFromUrl(attachment.url)}
            name={getAttachmentName(attachment)}
            src={attachment.previewUri ?? attachment.url}
            removable
            onRemove={() => onRemove(index)}
          />
        );
      })}
    </View>
  );
}