import React from 'react';

interface CustomMediaInfoPanelProps {
  name: string;
  size: number;
  type: string;
  dateModified: number;
  description?: string | null;
}

const CustomMediaInfoPanel: React.FC<CustomMediaInfoPanelProps> = ({
  name,
  size,
  type,
  dateModified,
  description,
}) => {
  function formatLocalDate(timestamp: number | undefined | null) {
    if (!timestamp || isNaN(timestamp)) return '-';
    const date = new Date(timestamp * 1000);
    return date.toLocaleString('de-DE');
  }
  return (
    <div
      style={{
        padding: 16,
        border: '1px solid #eee',
        borderRadius: 8,
        background: '#fafafa',
        maxWidth: 400,
      }}
    >
      <h3 style={{ marginBottom: 12 }}>Datei-Eigenschaften</h3>
      <div>
        <b>Name:</b> {name || '-'}
      </div>
      <div>
        <b>Typ:</b> {type || '-'}
      </div>
      <div>
        <b>Größe:</b> {typeof size === 'number' && !isNaN(size) ? size + ' Bytes' : '-'}
      </div>
      <div>
        <b>Geändert:</b> {formatLocalDate(dateModified)}
      </div>
      <div>
        <b>Beschreibung:</b>{' '}
        {description && description !== 'null' ? (
          description
        ) : (
          <span style={{ color: '#888' }}>Keine Beschreibung</span>
        )}
      </div>
    </div>
  );
};

export default CustomMediaInfoPanel;