import { IconProps } from './icon.types';
import React, { forwardRef } from 'react';
import { number, oneOf, string } from 'prop-types';

export const Icon = forwardRef<SVGSVGElement, IconProps>(
    (
        {
            children = '',
            grade = 0,
            weight = 500,
            svgSize = 20,
            fillIcon = 0,
            iconSize = 20,
            opticalSize = 24,
            type = 'outlined',
            ...props
        },
        ref,
    ) => {
        const fontVariation = {
            fontVariationSettings: `'FILL' ${fillIcon}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
        };

        return (
            <svg
                {...props}
                className={`m3 m3-svg-icon ${props.className ?? ''}`.trim()}
                height={svgSize}
                ref={ref}
                width={svgSize}
            >
                <text
                    className={`m3-${type[0].toUpperCase() + type.slice(1)} m3-size-${iconSize}px`}
                    style={fontVariation}
                    x={'50%'}
                    y={'50%'}
                >
                    {children ?? 'add_circle'}
                </text>
            </svg>
        );
    },
);

Icon.propTypes = {
    grade: number,
    svgSize: number,
    iconSize: number,
    children: string,
    opticalSize: number,
    fillIcon: oneOf([0, 1]),
    type: oneOf(['outlined', 'rounded', 'sharp']),
    weight: oneOf([100, 200, 300, 400, 500, 600, 700]),
};
