import type { FC } from 'react';
import type { BoxProps } from '../Box';

import Box from '../Box';

const DASH_ARRAY = '3,6';
const STROKE_WIDTH = 2;

interface DashedBoxProps extends BoxProps {
  color?: string;
  borderRadius?: number | string;
}

const DashedBox: FC<DashedBoxProps> = ({
  color = 'rgba(255,255,255,0.3)',
  style,
  borderRadius = 5,
  ...boxProps
}) => (
  <Box
    {...boxProps}
    style={{
      ...style,
      boxSizing: 'content-box',
      backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' fill='none' rx='5' ry='5' stroke='${encodeURIComponent(
        color
      )}' stroke-width='${STROKE_WIDTH}' stroke-dasharray='${DASH_ARRAY}' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
      borderRadius,
    }}
  />
);

export default DashedBox;