import { useState } from "react";
import MovingBees from "./components/MovingBees";
import Button from "@components/atoms/Button";
import GlassSurface, { GlassSurfaceContent } from "@components/surface/GlassSurface";
import DarkSurface from "@components/surface/DarkSurface";

export default function ApiaryRoute() {
  const [count, setCount] = useState(0);
  return (
    <div className="flex flex-col gap-2 items-center justify-evenly h-full">
      <DarkSurface className="p-3 rounded-xl">Count: {count}</DarkSurface>
      <div className="flex gap-2">
        <Button onClick={() => setCount(count + 1)} disabled={count >= 6}>
          +
        </Button>
        <Button onClick={() => setCount(count - 1)} disabled={count === 0}>
          -
        </Button>
      </div>
      <GlassSurface className="p-4 rounded-xl">
        <GlassSurfaceContent className="p-8 rounded-2xl">
          <MovingBees count={count as 0} className="w-25" />
        </GlassSurfaceContent>
      </GlassSurface>
    </div>
  );
}
