import * as React from 'react';
import { Props, State } from './type';
import {
  Container,
  Title,
  MoreLinkBox,
  MoreTitle,
  MoreIconSvg
} from './index.style'


const MoreSvgIcon = () => (
  <MoreIconSvg
    width="1em"
    height="1em"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect
      opacity="0.01"
      width="24"
      height="24"
      fill="white"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M11.0238 3.86114C10.3949 4.40028 10.322 5.34723 10.8611 5.97621L16.0244 12L10.8611 18.0238C10.322 18.6528 10.3949 19.5998 11.0238 20.1389C11.6528 20.678 12.5998 20.6052 13.1389 19.9762L19.1389 12.9762C19.6204 12.4145 19.6204 11.5856 19.1389 11.0238L13.1389 4.02384C12.5998 3.39485 11.6528 3.32201 11.0238 3.86114Z"
      fill="currentColor"
    />
  </MoreIconSvg>
);

export class LofterTitleAndMore extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();

  public render() {
    let {
      style,
      title,
      color,
      moreTitle,
      moreLink,
      marginTop,
      bold
    } = this.props;

    return (
      <Container
        style={{ ...style, marginTop: `${marginTop}rem` }}
      >
        <Title
          style={{
            color,
            fontWeight: bold ? 'bold' : 'normal'
          }}
        >
          {title}
        </Title>
        {
          moreTitle && moreLink && (
            <MoreLinkBox
              href={moreLink}
            >
              <MoreTitle>
                {moreTitle}
              </MoreTitle>
              <MoreSvgIcon />
            </MoreLinkBox>
          )
        }
      </Container>
    )
  }
}