const ResponsiveCardImg = styled(Card.Img)`
    // For screens wider than 768px
    @media(min-width: 768px) {
        // Your responsive styles here.
    }

    // For screens smaller than 768px
    @media(max-width: 768px) {
        // Your responsive styles here.
    }
`

export default function App() {
    return (
        <MainContainer>
            <Container>
                <Card text='white' bg='dark' style={styles.mainCard}>
                <ResponsiveCardImg
                    style={styles.cardImage}
                    onClick={handleClick}
                    src={apeImage}
                    alt='Degenerate Ape Academy'
                />
                <Card.Body>
                    <Card.Title className='text-center' as='h2'>
                    {apeId}
                    </Card.Title>
                </Card.Body>
                </Card>
            </Container>
        </MainContainer>
    );
}

const union = (...arr) => [...new Set(arr.flat())];

// Example
union([1, 2], [2, 3], [3]);     // [1, 2, 3]

const binomialCoefficient = (n, k) => {
  if (Number.isNaN(n) || Number.isNaN(k)) return NaN;
  if (k < 0 || k > n) return 0;
  if (k === 0 || k === n) return 1;
  if (k === 1 || k === n - 1) return n;
  if (n - k < k) k = n - k;
  let res = n;
  for (let j = 2; j <= k; j++) res *= (n - j + 1) / j;
  return Math.round(res);
};

binomialCoefficient(8, 2); // 28

const primes = num => {
  let arr = Array.from({ length: num - 1 }).map((x, i) => i + 2),
    sqroot = Math.floor(Math.sqrt(num)),
    numsTillSqroot = Array.from({ length: sqroot - 1 }).map((x, i) => i + 2);
  numsTillSqroot.forEach(x => (arr = arr.filter(y => y % x !== 0 || y === x)));
  return arr;
};

primes(10); // [2, 3, 5, 7]

const dragAndDropDiv = editor.container;

dragAndDropDiv.addEventListener('dragover', function(e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
});
dragAndDropDiv.addEventListener("drop",function(e){
    // Prevent default behavior (Prevent file from being opened)
    e.stopPropagation();
    e.preventDefault();
    const files = e.dataTransfer.items; // Array of all files

    console.assert(files.length >= 1);

    if (files[0].kind === 'file') {
        var file = e.dataTransfer.items[0].getAsFile();
        const fileSize = file.size;
        const fileName = file.name;
        const fileMimeType = file.type;

        reader = new FileReader();

        reader.onloadend = function(){
            editor.setValue(reader.result);
        }

        reader.readAsText(file);
    }else{
        //Maybe handle if text is dropped
        console.log(files[0].kind);
    }
});

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);