'use client';

import { useResizeObserver } from 'use-a-hook';

export default function ResizableCard() {
  const { ref, width, height } = useResizeObserver<HTMLDivElement>({
    round: Math.round
  });
  return (
    <div
      ref={ref}
      style={{
        resize: 'horizontal',
        overflow: 'auto',
        padding: 16,
        width: 280
      }}
    >
      <p>
        Card content: {Math.round(width ?? 0)} × {Math.round(height ?? 0)} CSS
        pixels
      </p>
      <p>Drag the resize handle to give the chart more room.</p>
    </div>
  );
}