"use client";

import { Button } from "@heroui/react";
import Image from "next/image";

type ViewMode = "grid" | "list";

interface ViewToggleProps {
  value: ViewMode;
  onChange: (mode: ViewMode) => void;
}

export default function ViewToggle({ value, onChange }: ViewToggleProps) {
  return (
    <div className="bg-gray-200 dark:bg-gray-700 rounded-lg p-1 flex gap-0">
      <Button
        isIconOnly
        size="sm"
        variant="light"
        onPress={() => onChange("list")}
        className={`w-8 h-8 min-w-8 rounded-lg transition-all ${
          value === "list"
            ? "bg-white dark:bg-gray-600 shadow-sm"
            : "bg-transparent hover:bg-gray-300 dark:hover:bg-gray-600"
        }`}
        style={{ padding: 0 }}
      >
        <Image
          src="/edit-list-unordered0.svg"
          alt="List view"
          width={24}
          height={24}
        />
      </Button>
      <Button
        isIconOnly
        size="sm"
        variant="light"
        onPress={() => onChange("grid")}
        className={`w-8 h-8 min-w-8 rounded-lg transition-all ${
          value === "grid"
            ? "bg-white dark:bg-gray-600 shadow-sm"
            : "bg-transparent hover:bg-gray-300 dark:hover:bg-gray-600"
        }`}
        style={{ padding: 0 }}
      >
        <Image
          src="/menu-more-grid-small0.svg"
          alt="Grid view"
          width={24}
          height={24}
        />
      </Button>
    </div>
  );
}