import * as React from "react"
import { storiesOf } from "@storybook/react"
import Header, { HeaderSize } from "../Header"
import styled from "styled-components"

const s = storiesOf("Header", module)

s.add("Header h1", () => {
  return (
    <div>
      <Header
        size={HeaderSize.one}
        dangerouslySetInnerHTML={{ __html: "TEST_HEADER nana" }}
      />
    </div>
  )
})

s.add("Header h1 with A", () => {
  return (
    <div>
      <a href="http://somewhere">
        <Header
          size={HeaderSize.one}
          dangerouslySetInnerHTML={{ __html: "TEST_HEADER nana" }}
        />
      </a>
    </div>
  )
})

const Container = styled.div`
  color: green;
  a {
    color: red;
  }
`
s.add("Header h1 with and styled", () => {
  return (
    <Container>
      <a href="http://somewhere">
        <Header
          size={HeaderSize.one}
          dangerouslySetInnerHTML={{ __html: "TEST_HEADER nana" }}
        />
      </a>
    </Container>
  )
})

const HeaderPlus = styled(Header)`
  color: purple;
`
s.add("Header h1 with styled(Header)", () => {
  return (
    <a href="http://google.com">
      <HeaderPlus
        size={HeaderSize.one}
        dangerouslySetInnerHTML={{ __html: "TEST TEST ja" }}
      />
    </a>
  )
})