import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import Attachment from './Attachment';

export class AttachmentList extends PureComponent {
  render() {
    const { attachments, onRescan, onDelete, onClick, disabled } = this.props;
    if (!Array.isArray(attachments) || attachments.length === 0) {
      return null;
    }

    return (
      <Box sx={{ mt: 2.5, pt: 1.5, borderTop: '1px solid', borderColor: 'divider' }}>
        <Typography
          variant="caption"
          color="text.secondary"
          fontWeight={600}
          sx={{ mb: 1, display: 'block', textTransform: 'uppercase', letterSpacing: '0.05em' }}
        >
          Dateianhänge ({attachments.length})
        </Typography>
        <Stack direction="row" spacing={1.5} sx={{ flexWrap: 'wrap', gap: 1.5 }}>
          {attachments.map((attachment, index) => (
            <Attachment
              key={attachment.id ?? index}
              attachment={attachment}
              onRescan={onRescan}
              onDelete={onDelete}
              onClick={onClick}
              disabled={disabled}
            />
          ))}
        </Stack>
      </Box>
    );
  }
}

export default AttachmentList;