import React, { useState } from 'react';

const ThemeToggler = () => {
  const [isDark, setIsDark] = useState(false);
  const toggleTheme = () => setIsDark(!isDark);

  return (
    <div 
    className={`app 
      ${isDark ? "dark-theme" : "light-theme"}`}>
      <h3>{isDark ? 
        "🌙 I code at night. Hire me!" : 
        "☀️ I code during the day. Hire me!"}</h3>
      <button onClick={toggleTheme}>
        {isDark ? 
          'Switch to Day Mode' : 
          'Switch to Night Mode'}
      </button>
    </div>
  );
};

export default ThemeToggler;

defmodule CoffeeCounter do
  use GenServer

  def start_link(init_value) do 
    GenServer.start_link(__MODULE__, init_value)
  end
  
  def increment(pid) do 
    GenServer.call(pid, :increment)
  end

  def init(value), do: {:ok, value}
  def handle_call(:increment, _from, state) do 
    {:reply, state + 1, state + 1}
  end
end

{:ok, counter_pid} = CoffeeCounter.start_link(0)
coffees_had = CoffeeCounter.increment(counter_pid)

---
import hljs from "highlight.js";

const html = hljs.highlight(
  `would cause a recursion 🚀`,
  { language: "astro" }
).value;
---

<div class="col-span-3 lg:col-span-1 flex flex-col">
  <h3 class="text-3xl mt-3 lg:mt-0 mb-3 text-purple-400 text-center">
    Full-Stack
  </h3>
  <div class="bg-gray-800 rounded-md p-4 flex-1">
    <pre class="overflow-x-scroll" set:html={html} />
  </div>
</div>