<commit_before>import { createContext, useContext } from "react"
import styled from "styled-components"
import { TileView } from "@/App/LiveRates/selectedView"
import { Tile, tile$ } from "@/App/LiveRates/Tile"
import { useDate } from "@/App/LiveRates/Tile/Header/TileHeader"
import { useTileCurrencyPair } from "@/App/LiveRates/Tile/Tile.context"
import { useCurrencyPair } from "@/services/currencyPairs"
import { PopOutIcon } from "../icons/PopOutIcon"
import { onTearOut } from "./tornOutTiles"

export { tile$ }

interface Props {
  symbol: string
  view: TileView
  isTornOut: boolean
}

export const DetachableTile: React.FC<Props> = ({
  symbol,
  view,
  isTornOut,
}) => {
  const currencyPair = useCurrencyPair(symbol)

  return (
    <TearOutContext.Provider value={isTornOut}>
      <Tile
        HeaderComponent={Header}
        currencyPair={currencyPair}
        isAnalytics={view === TileView.Analytics}
      />
    </TearOutContext.Provider>
  )
}

const DeliveryDate = styled.div`
  color: ${({ theme }) => theme.core.textColor};
  font-size: 0.625rem;
  line-height: 1rem;
  opacity: 0.59;
  margin-left: auto;
  transition: margin-right 0.2s;
`

const HeaderWrapper = styled.div`
  display: flex;
  align-items: center;
`
const TileSymbol = styled.div`
  color: ${({ theme }) => theme.core.textColor};
  font-size: 0.8125rem;
  line-height: 1rem;
`

const HeaderAction = styled.div``

const Header: React.FC = () => {
  const { base, terms, symbol } = useTileCurrencyPair()
  const date = useDate(symbol)
  const isTornOut = useContext(TearOutContext)

  return (
    <HeaderWrapper>
      <TileSymbol data-qa="tile-header__tile-symbol">
        {base}/{terms}
      </TileSymbol>

      <DeliveryDate data-qa="tile-header__delivery-date">{date}</DeliveryDate>

      {!isTornOut && (
        <HeaderAction onClick={() => onTearOut(symbol)}>
          <PopOutIcon />
        </HeaderAction>
      )}
    </HeaderWrapper>
  )
}

const TearOutContext = createContext(false)
<commit_msg>Appear pop out icon on tile hover<commit_after>import { createContext, useContext } from "react"
import styled from "styled-components"
import { TileView } from "@/App/LiveRates/selectedView"
import { Tile, tile$ } from "@/App/LiveRates/Tile"
import { useDate } from "@/App/LiveRates/Tile/Header/TileHeader"
import { useTileCurrencyPair } from "@/App/LiveRates/Tile/Tile.context"
import { useCurrencyPair } from "@/services/currencyPairs"
import { PopOutIcon } from "../icons/PopOutIcon"
import { onTearOut } from "./tornOutTiles"

export { tile$ }

const Wrapper = styled.div`
  .pop-out-icon {
    visibility: hidden;
  }

  &:hover .pop-out-icon {
    visibility: visible;
  }
}
`

interface Props {
  symbol: string
  view: TileView
  isTornOut: boolean
}

export const DetachableTile: React.FC<Props> = ({
  symbol,
  view,
  isTornOut,
}) => {
  const currencyPair = useCurrencyPair(symbol)

  return (
    <TearOutContext.Provider value={isTornOut}>
      <Wrapper>
        <Tile
          HeaderComponent={Header}
          currencyPair={currencyPair}
          isAnalytics={view === TileView.Analytics}
        />
      </Wrapper>
    </TearOutContext.Provider>
  )
}

const DeliveryDate = styled.div`
  color: ${({ theme }) => theme.core.textColor};
  font-size: 0.625rem;
  line-height: 1rem;
  opacity: 0.59;
  margin-left: auto;
  transition: margin-right 0.2s;
`

const HeaderWrapper = styled.div`
  display: flex;
  align-items: center;
`
const TileSymbol = styled.div`
  color: ${({ theme }) => theme.core.textColor};
  font-size: 0.8125rem;
  line-height: 1rem;
`

const HeaderAction = styled.div``

const Header: React.FC = () => {
  const { base, terms, symbol } = useTileCurrencyPair()
  const date = useDate(symbol)
  const isTornOut = useContext(TearOutContext)

  return (
    <HeaderWrapper>
      <TileSymbol data-qa="tile-header__tile-symbol">
        {base}/{terms}
      </TileSymbol>

      <DeliveryDate data-qa="tile-header__delivery-date">{date}</DeliveryDate>

      {!isTornOut && (
        <HeaderAction
          onClick={() => onTearOut(symbol)}
          className="pop-out-icon"
        >
          <PopOutIcon />
        </HeaderAction>
      )}
    </HeaderWrapper>
  )
}

const TearOutContext = createContext(false)

{'fraction_non_alphanumeric': 0.13907129455909945, 'fraction_numerical': 0.0075046904315197, 'mean_word_length': 3.334349593495935, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '415707', 'n_tokens_mistral': 1452, 'n_tokens_neox': 1425, 'n_words': 291}