/**
 * PostImages 子组件
 * 显示帖子图片网格
 */

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { spacing, borderRadius } from '../../../../theme';
import { useResponsive } from '../../../../hooks/useResponsive';
import { ImageGrid, ImageGridItem } from '../../../common';
import { PostImagesProps } from '../types';

const PostImages: React.FC<PostImagesProps> = ({ images, displayMode, onImagePress }) => {
  const { isDesktop, isWideScreen } = useResponsive();

  if (!images || images.length === 0) return null;

  // 计算图片间距和圆角
  const imageGap = isDesktop ? 4 : 2;
  const imageBorderRadius = isDesktop ? borderRadius.xl : borderRadius.md;

  return (
    <View style={styles.container}>
      <ImageGrid
        images={images.map((img) => ({
          id: img.id,
          url: img.url,
          thumbnail_url: img.thumbnail_url,
          preview_url: img.preview_url,
          preview_url_large: img.preview_url_large,
          width: img.width,
          height: img.height,
        }))}
        maxDisplayCount={isWideScreen ? 12 : 9}
        mode="auto"
        gap={imageGap}
        borderRadius={imageBorderRadius}
        showMoreOverlay={true}
        onImagePress={onImagePress}
        displayMode={displayMode}
        usePreview={true}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginBottom: spacing.md,
  },
});

export default PostImages;