import React from 'react';

export default function PostModal({ open, onClose, post }) {
  if (!open) return null;
  return (
    <div style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', background: 'rgba(36,36,36,0.4)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ background: '#fff', borderRadius: 16, boxShadow: '0 4px 24px #8888', padding: 32, minWidth: 320, maxWidth: 480, width: '100%', position: 'relative' }}>
        <button onClick={onClose} style={{ position: 'absolute', top: 16, right: 16, background: '#eee', border: 'none', borderRadius: '50%', width: 32, height: 32, fontWeight: 700, fontSize: 18, cursor: 'pointer' }}>×</button>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16 }}>
          <img src="/vite.svg" alt="avatar" style={{ width: 40, height: 40, borderRadius: '50%' }} />
          <div>
            <div style={{ fontWeight: 600, fontSize: '1rem', color: '#222' }}>{post?.username}</div>
            <div style={{ color: '#888', fontSize: '0.9rem' }}>{post && new Date(post.createdAt).toLocaleString()}</div>
          </div>
        </div>
        <div style={{ fontSize: '1.1rem', color: '#333', marginBottom: 24 }}>{post?.content}</div>
        <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
          <button style={{ background: '#646cff', color: '#fff', border: 'none', borderRadius: 8, padding: '8px 16px', fontWeight: 500 }}>Like ({post?.likes})</button>
          <span style={{ color: '#888' }}>Comments: {post?.comments}</span>
        </div>
      </div>
    </div>
  );
}