"use server";

import Clicker from "./Clicker";
import Label from "./Label";

export default function Home() {
  return (
    <main>
      <Clicker LabelComponent={Label} />
    </main>
  );
}

// ---------------------------------------
"use client";

import { FunctionComponent, useState } from "react";

export default function Clicker({
  LabelComponent,
}: {
  LabelComponent: FunctionComponent<{ value: number }>;
}) {
  const [value, setValue] = useState(0);
  return (
    <div>
      <h1>Clicker</h1>
      <button onClick={() => setValue(value + 1)}>Click me</button>
      <LabelComponent value={value} />
    </div>
  );
}



// ---------------------------------------
"use server";

export default function Label({ value }: { value: number }) {
  return <div>Value: {value}</div>;
}