import React, { Component } from 'react';
import styled from '@emotion/styled';
import { StaticQuery, graphql } from 'gatsby';

interface LogoProps {
  type: 'logo' | 'logoIcon' | 'logoCheckout';
}

class Logo extends Component<LogoProps> {
  static defaultProps = {
    type: 'logo'
  }

  render(): JSX.Element {
    const LogoImage: any = styled.img`
      display: block;
      width: 100%;
    `;

    return (
      <StaticQuery
        query={graphql`
          query LogoQuery {
            siteConfig {
              id
              siteTitle
              logo {
                url
              }
              logoIcon {
                url
              }
              logoCheckout {
                url
              }
            }
          }
        `}
        render={(data): JSX.Element => {
          const { siteTitle } = data.siteConfig;

          return (
            <LogoImage
              title={siteTitle}
              src={data.siteConfig[this.props.type].url}
            />
          );
        }}
      />
    );
  }
}

export default Logo;