import React from 'react';

type Props = {
  shape: string;
  width: number;
  height: number;
  bdcolor: string;
  bdwidth: number;
  transparency: number;
  fcolor?: string;
  ftransparency?: number;
};

const SvgShapeElement: React.FC<Props> = ({
  shape,
  width,
  height,
  bdcolor,
  bdwidth,
  transparency,
  fcolor,
  ftransparency,
}: Props) => (
  <svg viewBox={`0 0 ${width} ${height}`}>
    {shape === 'Circle' ? (
      <ellipse
        cx="50%"
        cy="50%"
        rx={(width - bdwidth) / 2}
        ry={(height - bdwidth) / 2}
        stroke={bdcolor}
        strokeWidth={bdwidth}
        strokeOpacity={transparency}
        fill={fcolor}
        fillOpacity={ftransparency}
      />
    ) : null}
    {shape === 'Square' ? (
      <rect
        x={bdwidth / 2}
        y={bdwidth / 2}
        width={`${width - bdwidth}px`}
        height={`${height - bdwidth}px`}
        stroke={bdcolor}
        strokeWidth={bdwidth}
        strokeOpacity={transparency}
        fill={fcolor}
        fillOpacity={ftransparency}
      />
    ) : null}
  </svg>
);

export default SvgShapeElement;