import React from "react";

export type SizeProp = {
  width?: number;
  height?: number;
};

export type BaseWidgetProps = SizeProp & {
  baseSize?: SizeProp;
  width: number;
  right?: number;
  top?: number;
  divideCount?: number;
  wMargin?: boolean;
  hMargin?: boolean;
  className?: string;
  style: object;
  children: JSX.Element;
};

function BaseWidget({
  baseSize,
  width = 0,
  height = 0,
  right = 0,
  top = 0,
  divideCount = 24,
  wMargin = false,
  hMargin = false,
  className = "",
  style = {},
  children,
}: BaseWidgetProps) {
  const pieceWidth = (baseSize?.width || 0) / divideCount;
  const pieceHeight = 1024 / divideCount;

  return (
    <div
      style={{
        width: width * pieceWidth - (wMargin ? 16 : 0),
        height: height * pieceHeight - (hMargin ? 16 : 0),
        right: right * pieceWidth,
        top: top * pieceHeight,
        transition: "100ms width ease-in",
        ...style,
      }}
      className={`base-widget absolute transition duration-100 bg-white overflow-hidden rounded-lg shadow-sm p-3 dark:bg-gray-800 ${className}`}
    >
      <div className={`w-full h-full rounded-lg relative`}>{children}</div>
    </div>
  );
}

export { BaseWidget };