import { VFC } from 'react';
import { Icon, Item, Label } from 'semantic-ui-react';

import { Organization } from 'domains/github';
import './OrgInfo.css';

const OrgInfo: VFC<{ org: Organization | null }> = ({ org = null }) =>
  org ? (
    <>
      <Item.Group>
        <Item>
          <Item.Image src={org.avatarUrl} size="small" />
          <Item.Content>
            <Item.Header as="a">{org.name}</Item.Header>
            <Item.Meta>{org.description}</Item.Meta>
            <Item.Extra>
              {org.location && (
                <span>
                  <Icon name="map marker alternate" />
                  {org.location}
                </span>
              )}
              {org.blog && (
                <span>
                  <Icon name="globe" />
                  <a href={org.blog} target="_blank" rel="noopener noreferrer">
                    {org.blog}
                  </a>
                </span>
              )}
              {org.isVerified && (
                <Label basic color="teal">
                  verified
                </Label>
              )}
            </Item.Extra>
          </Item.Content>
        </Item>
      </Item.Group>
    </>
  ) : (
    <div />
  );

export default OrgInfo;