import React from "react";
import { Squares2X2Icon, Bars3Icon } from "@heroicons/react/24/solid";

export type LayoutSwitchProps = {
  layout: "square" | "horizontal"
  setLayout: (value: React.SetStateAction<"square" | "horizontal">) => void
};

export function LayoutSwitch({
    layout,
    setLayout
}: LayoutSwitchProps) {

  return (
      <div className="flex justify-end">
        <button
          className="p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
          onClick={() =>
            setLayout(prev => (prev === "square" ? "horizontal" : "square"))
          }>
          {layout === "square"
            ? <Squares2X2Icon className="w-6 h-6" />
            : <Bars3Icon className="w-6 h-6" />
          }
        </button>
      </div>
  );
}