import React from 'react';
import { TechRadar } from 'techradar-component';


type RadarProps = {
  quadrants: string[];
  rings?: string[];
  data?: {
    id: number;
    name: string;
    quadrant: string;
    ring: string;
  }[]
  width?: number;
  fontSize?: number;
  itemFontSize?: number;
  colorScaleIndex?: number;
  radiusDiminish?: number;
}

const setup: RadarProps  = {
    rings: ['adopt', 'trial', 'assess', 'hold'],
    quadrants: ['tools', 'techniques', 'platforms', 'languages'],
    data: [
      {
        id: 1,
        name: 'D3',
        quadrant: 'tools',
        ring: 'assess',
      },
      {
        id: 2,
        name: 'TypeScript',
        quadrant: 'languages',
        ring: 'trial',
      },
      {
        id: 3,
        name: 'Storybook',
        quadrant: 'tools',
        ring: 'adopt',
      },
    ],
  }

const MyComponent = () => {
  return (
    <TechRadar
      {...setup}
    />
  );
};