import { createSignal, For, Show } from "solid-js";
import { Dynamic } from "solid-js/web";
import { FooComponent } from "./Foo";
import { NewFooComponent } from "./NewFoo";
const RedDiv = () => <div style="color: red">Red</div>;
const GreenDiv = () => <div style="color: green">Green</div>;
const BlueDiv = () => <div style="color: blue">Blue</div>;
const YellowDiv = () => <div style="color: yellow">Yellow</div>;
const BlackDiv = () => <div style="color: black">Black</div>;

const options = {
  red: RedDiv,
  green: GreenDiv,
  blue: BlueDiv,
  yellow: YellowDiv,
  black: BlackDiv,
};


function MyComponent() {
  const [count, setCount] = createSignal(0);

  console.log(count());

  return (
    <div>
      <Show
        when={count() > 5}
        fallback={
          <>
            <p>Count: {count()}</p>
            <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
          </>
        }
      >
        <div>Count Limit reached</div>
      </Show>
    </div>
  )
}

function App() {
  const [selected, setSelected] = createSignal("red");

  return (
    <>
      <MyComponent />
      <select
        value={selected()}
        onInput={(e) => setSelected(e.currentTarget.value)}
      >
        <For each={Object.keys(options)}>
          {(color) => <option value={color}>{color}</option>}
        </For>
      </select>
      <Dynamic component={options[selected()]} />
      <FooComponent text="props test"/>
      <div class="m-12 items-center justify-center^ flex h-screen shadow-lg bg-twitter-blue text-center">
        red background
      </div>
      <NewFooComponent/>
    </>
  );
}

export default App;