// The TSX twin of the C# "Welcome" fiddle: same controls, same names, same screen.
const PADDING = new Thickness(24);

export default function App() {
  const [count, setCount] = useState(0);
  const title = count === 0 ? "Click Me!" : `Clicked ${count} times!`;

  // The C# twin watches the button's Text with ObserveProperties. React has no bindings:
  // the state below IS the source of the title, so this only reports the change.
  useEffect(() => { console.log(`Text changed \u2192 ${title}`); }, [title]);

  return (
    <SkiaLayout Type="Column" UseCache="Operations" Spacing={18} Padding={PADDING}
                HorizontalOptions="Center" VerticalOptions="Center">

      <SkiaSvg Source="/_content/DrawnUi.Fiddle/seed/drawnui.svg"
               WidthRequest={150} LockRatio={1} UseCache="Operations"
               HorizontalOptions="Center" />

      <SkiaLabel Text="Welcome to DrawnUI" FontFamily="FontTextTitle" FontSize={26}
                 TextColor="#FFFFFF" HorizontalOptions="Center" />

      <SkiaRichLabel Text={"Draw with **Skia** everywhere. This TSX draws on **CanvasKit** in any web app, and the same engine draws **C#** on mobile and desktop."}
                     FontFamily="FontText" FontSize={15} LineSpacing={1.3} TextColor="#94A3B8"
                     WidthRequest={380} HorizontalTextAlignment="Center" HorizontalOptions="Center" />

      <SkiaRichLabel Text={`State drives the button title: "${title}" \ud83d\udd25`}
                     FontFamily="FontText" FontFamilyFallback="FontEmoji" FontSize={13}
                     TextColor="#67E8F9" HorizontalOptions="Center" />

      <SkiaButton Text={title} BackgroundColor="#DC143C" TextColor="#FFFFFF" CornerRadius={10}
                  HorizontalOptions="Center"
                  Tapped={() => setCount((c) => {
                    console.log(`Button clicked ${c + 1} time(s)`);
                    return c + 1;
                  })} />
    </SkiaLayout>
  );
}