import { Rate, Icon } from '@btri-ui/base';
import React from 'react';

const customIcons: Record<number, React.ReactNode> = {
  1: <Icon iconName="EmotionUnhappy" />,
  2: <Icon iconName="EmotionUnhappy" />,
  3: <Icon iconName="EmotionUnhappy" />,
  4: <Icon iconName="EmotionHappy" />,
  5: <Icon iconName="EmotionHappy" />,
};

const App: React.FC = () => (
  <>
    <Rate
      defaultValue={2}
      character={({ index }: { index: number }) => index + 1}
    />
    <br />
    <Rate
      defaultValue={3}
      character={({ index }: { index: number }) => customIcons[index + 1]}
    />
  </>
);

export default App;