import { Message } from "@artsy/palette"
import React from "react"
import styled from "styled-components"

interface ArtworkGridEmptyStateProps {
  onClearFilters?: () => void
}

export const ArtworkGridEmptyState: React.SFC<ArtworkGridEmptyStateProps> = props => (
  <Message>
    <span>
      There aren't any works available that meet the following criteria at this
      time.
    </span>
    {props.onClearFilters && (
      <span>
        {" "}
        Change your filter criteria to view more works.{" "}
        <ResetFilterLink onClick={props.onClearFilters}>
          Clear all filters
        </ResetFilterLink>
        .
      </span>
    )}
  </Message>
)

const ResetFilterLink = styled.span`
  text-decoration: underline;
  cursor: pointer;
`

import { Message } from "@artsy/palette"
import React from "react"
import styled from "styled-components"

interface ArtworkGridEmptyStateProps {
  onClearFilters?: () => void
}

export const ArtworkGridEmptyState: React.SFC<ArtworkGridEmptyStateProps> = props => (
  <EmptyMessage>
    <span>
      There aren't any works available that meet the following criteria at this
      time.
    </span>
    {props.onClearFilters && (
      <span>
        {" "}
        Change your filter criteria to view more works.{" "}
        <a onClick={props.onClearFilters}>Clear all filters</a>.
      </span>
    )}
  </EmptyMessage>
)

// TODO: add link styling to palette Message
const EmptyMessage = styled(Message)`
  a {
    text-decoration: underline;
    cursor: pointer;
  }
`

EmptyMessage.displayName = "EmptyMessage"

--- 
+++ 
@@ -7,7 +7,7 @@
 }
 
 export const ArtworkGridEmptyState: React.SFC<ArtworkGridEmptyStateProps> = props => (
-  <EmptyMessage>
+  <Message>
     <span>
       There aren't any works available that meet the following criteria at this
       time.
@@ -16,18 +16,16 @@
       <span>
         {" "}
         Change your filter criteria to view more works.{" "}
-        <a onClick={props.onClearFilters}>Clear all filters</a>.
+        <ResetFilterLink onClick={props.onClearFilters}>
+          Clear all filters
+        </ResetFilterLink>
+        .
       </span>
     )}
-  </EmptyMessage>
+  </Message>
 )
 
-// TODO: add link styling to palette Message
-const EmptyMessage = styled(Message)`
-  a {
-    text-decoration: underline;
-    cursor: pointer;
-  }
+const ResetFilterLink = styled.span`
+  text-decoration: underline;
+  cursor: pointer;
 `
-
-EmptyMessage.displayName = "EmptyMessage"
[Filter] Change reset link to be text instead of an anchor tag
