export const Authors = ({ data }) => {
  const baseUrl = (typeof window !== 'undefined' && window.location.origin.includes('localhost')) ? '' : 'https://raw.githubusercontent.com/haydenbleasel/next-forge/refs/heads/main/docs';

  return (
    <div style={{ marginBottom: '3rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
      <span style={{ color: 'rgb(107, 114, 128)', fontSize: '0.875rem' }}>Co-authored by</span>
      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '0.5rem' }}>
        {data.map((author) => (
          <div
            key={author.name}
            style={{
              padding: '0.75rem',
              paddingRight: '1rem',
              display: 'inline-flex',
              alignItems: 'center',
              gap: '0.75rem',
              fontWeight: 'normal',
              position: 'relative',
              ringWidth: '2px',
              ringColor: 'transparent',
              borderRadius: '0.75rem',
              backgroundColor: 'white',
              border: '1px solid rgba(0,0,0,0.1)',
              overflow: 'hidden'
            }}
          >
            <div style={{ position: 'relative' }}>
              <div style={{ overflow: 'hidden', border: '1px solid #e5e7eb', borderRadius: '9999px', width: '2rem', height: '2rem' }}>
                <img
                  style={{ margin: 0, width: '100%', height: '100%', objectFit: 'cover' }}
                  src={`${baseUrl}/images/authors/${author.company.id}/${author.user.id}.jpg`}
                  alt=""
                  width={32}
                  height={32}
                />
              </div>
              <div
                style={{
                  position: 'absolute',
                  border: '1px solid white',
                  overflow: 'hidden',
                  borderRadius: '9999px',
                  objectFit: 'cover',
                  width: '1rem',
                  height: '1rem',
                  right: '-0.25rem',
                  bottom: '-0.25rem'
                }}
              >
                <img
                  style={{ margin: 0, width: '100%', height: '100%', objectFit: 'cover' }}
                  src={`${baseUrl}/images/authors/${author.company.id}/logo.jpg`}
                  alt=""
                  width={16}
                  height={16}
                />
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <span
                style={{
                  fontWeight: 600,
                  lineHeight: 1.25,
                  fontSize: '13px',
                  letterSpacing: '-0.01em'
                }}
              >
                {author.user.name}
              </span>
              <span
                style={{
                  color: 'rgb(107, 114, 128)',
                  lineHeight: 1.25,
                  fontSize: '11px'
                }}
              >
                {author.company.name}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
