export const ViewExample: React.FC = () => {
  const [selectedTheme, setTheme] = React.useState<ThemeColor>(ThemeColor.light);
  const toogleTheme = () => {
    setTheme(selectedTheme === ThemeColor.light ? ThemeColor.dark : ThemeColor.light);
  };

  return (
    <UiView theme={DefaultTheme} selectedTheme={selectedTheme}>
      <p>All the react tree should render inside here</p>
      <UiButton onClick={toogleTheme}>Toggle theme</UiButton>
    </UiView>
  );
};

export const ViewRowExample: React.FC = () => {
  const [selectedTheme, setTheme] = React.useState<ThemeColor>(ThemeColor.light);
  const toogleTheme = () => {
    setTheme(selectedTheme === ThemeColor.light ? ThemeColor.dark : ThemeColor.light);
  };

  return (
    <UiView theme={DefaultTheme} selectedTheme={selectedTheme}>
      <UiViewRow weight="10">
        <p>A row with weight 10</p>
      </UiViewRow>
      <UiViewRow weight="50" centeredContent>
        <p>A row with weight 50</p>
      </UiViewRow>
      <UiViewRow>
        <p>A row with default theme</p>
      </UiViewRow>
      <UiViewRow weight="150">
        <p>A row with weight 150</p>
      </UiViewRow>
      <UiViewRow weight="200">
        <p>A row with weight 200</p>
      </UiViewRow>
      <UiViewRow weight="200" noBackground>
        <p>A row without background color</p>
      </UiViewRow>
      <UiViewRow inverseFont category="negative">
        <p>Row with inverse font and category</p>
      </UiViewRow>
      <UiButton onClick={toogleTheme}>Toggle theme</UiButton>
    </UiView>
  );
};