import * as React from "react";
import { Grid, Divider, Header, Icon } from "semantic-ui-react";

interface Props {
  action: any;
  description: string;
  icon: any;
  title: string;
}

export default class MagaHeader extends React.Component<Props> {
  static defaultProps = {
    action: "",
    description: "Página sem drescrição",
    icon: "question circle outline",
    title: "Página sem título"
  };

  render() {
    const { action, description, icon, title } = this.props;
    return (
      <div>
        <Grid divided="vertically">
          <Grid.Row columns={2}>
            <Grid.Column>
              <Header color="blue" as="h2" className="ref-title">
                <Icon name={icon} />
                <Header.Content>
                  {title}
                  <Header.Subheader>{description}</Header.Subheader>
                </Header.Content>
              </Header>
            </Grid.Column>
            <Grid.Column textAlign="right">{action}</Grid.Column>
          </Grid.Row>
        </Grid>
        <Divider />
      </div>
    );
  }
}