import React, { ReactNode } from 'react';

// this helps rendering the item key inside the card instead of inspecting in in react-dev-tools
export function DebugItemKeyRecycler({ children }: { children?: ReactNode }) {
  return (
    <div
      style={{
        position: 'absolute',
        border: 'solid 1px #fff',
        top: 6,
        left: 6,
        padding: 6,
        backgroundColor: '#000',
        zIndex: 2000,
      }}
    >
      <span style={{ color: '#fff' }}>{children}</span>
    </div>
  );
}