import * as React from 'react'
import {ResponsiveImage} from '../ResponsiveImage'

const Link = ({to, children}) => <a href={to}>{children}</a>

/**
 *
 * @category Components
 * @internal
 */
export const CornerFold = ({children, style = {}, to}) => {
  const FoldWrapper = to ? Link : React.Fragment
  return (
    <>
      <div
        style={{
          isolation: `isolate`,
        }}
      >
        {children}
      </div>
      <FoldWrapper to={to}>
        <div
          style={{
            position: `absolute`,
            bottom: `0`,
            right: `0`,
            width: `clamp(23rem, 40%, 40vmin)`,
            ...style,
          }}
        >
          <ResponsiveImage
            src="https://res.cloudinary.com/mabx-eu-prod/image/upload/v1/studio/page-curl-flattened_dfkobt"
            alt=""
            style={{
              objectFit: `cover`,
              width: `100%`,
              display: `block`,
            }}
          />
        </div>
      </FoldWrapper>
    </>
  )
}

export default CornerFold