import React from 'react';
import { IShapePath, IWidgetIcon } from '@vev/utils';
import { isArray } from 'lodash';

interface ShapePreviewProps {
  shape: IWidgetIcon | IShapePath;
  className?: string;
}

export function SilkeShape({ shape, className = 'fill' }: ShapePreviewProps) {
  if (!shape) return null;

  if (!isArray(shape) && shape.type) return <img src={shape.value} />;

  const [width, height, ...path] = isArray(shape) ? shape : (shape.value as IShapePath);
  return (
    <svg className={className} style={{ background: undefined }} viewBox={`0 0 ${width} ${height}`}>
      {path.map((d, index) => (
        <path key={index} d={d} fill="blawhitek" />
      ))}
    </svg>
  );
}