<TeethSVG color={!currentTooth.isSelected ? "#aaa" : "#000"} />
import React from "react";

const TeethSVG = ({ color }: { color: string }) => {
    console.log(color);
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width={65} height={65} fill="none" viewBox="-0.538 0 511.998 511.998">
            <g xmlSpace="preserve"
                style={{
                    fill: "#000",
                }}>
                <path
                    fill="none"
                    d="..."
                    className="fills"
                    style={{
                        fill: "#fff",
                        fillOpacity: 0,
                    }}/>
                <g className="strokes">
                    <g className="inner-stroke-shape">
                        <defs>
                            <clipPath id="b">
                                <use href="#a" />
                            </clipPath>
                            <path
                                id="a"
                                d="..."
                                style={{
                                    fill: "none",
                                    strokeWidth: 28,
                                    stroke: color,
                                    strokeOpacity: 1,
                                }}/>
                        </defs>
                        <use clipPath="url('#b')" href="#a" />
                    </g>
                </g>
                <path
                    fill="none"
                    d="..."
                    className="fills"
                    style={{
                        fill: "#fff",
                        fillOpacity: 0,
                    }}
                />
                
                    </g>
                </g>
            </g>
        </svg>
    );
};

export default TeethSVG;