import * as React from 'react';
import { FC } from 'react';
import { style } from 'typestyle';
import AdAlongLogo from '../../../Icons/AdalongLogo';

interface AttributionFooterProps {
  classPrefix?: string;
  type: 'list' | 'modal'
}

const AttributionFooter: FC<AttributionFooterProps> = ({ 
  classPrefix = '',
  type,
}) => {
  return (
    <div className={`${styles.footer(type)} ${classPrefix}-attribution-footer`}>
      <div className={styles.borderTop(type)} />
      <div className={styles.content}>
        <span className={styles.text}>Powered by</span>
        <AdAlongLogo 
          color="rgba(120, 120, 120, 0.8)"
          size={50} 
          style={{ verticalAlign: 'middle' }} 
        />
      </div>
    </div>
  );
};

const styles = {
  footer: (type : 'list' | 'modal') => style({
    width: '100%',
    paddingTop: '8px',
    paddingBottom: type === 'modal' ? '0' : '8px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 'auto',
    position: 'relative',
    background: '#FFFFFF',
  }),
  borderTop: (type : 'list' | 'modal') => style({
    width: type === 'modal' ? '50%' : '100%',
    height: '1px',
    backgroundColor: 'rgba(0, 0, 0, 0.05)',
    marginBottom: type === 'modal' ? '4px' : '8px',
  }),
  content: style({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  }),
  text: style({
    fontFamily: "'Fustat', sans-serif",
    fontSize: '14px',
    color: 'rgba(120, 120, 120, 0.8)',
    fontWeight: 300,
    marginRight: '2px',
  }),
};

export default AttributionFooter;