import React, { memo } from "react";
import { useGenerator } from "../../context/GeneratorContext";

const ViewGridIcon = ({ className = "w-5 h-5" }) => (
  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
  </svg>
);

const ViewListIcon = ({ className = "w-5 h-5" }) => (
  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
  </svg>
);

function ViewToggle({ className = "" }) {
  const { viewMode, setViewMode } = useGenerator();

  return (
    <div
      className={`flex rounded-md border border-gray-200 bg-white p-0.5 h-9 ${className}`}
      role="group"
      aria-label="View mode"
    >
      <button
        type="button"
        onClick={() => setViewMode("grid")}
        aria-pressed={viewMode === "grid"}
        className={`flex items-center justify-center gap-1.5 sm:gap-2 rounded-[5px] px-2 sm:px-3 h-8 text-xs sm:text-sm font-medium transition-colors ${
          viewMode === "grid"
            ? "bg-gray-800 text-white"
            : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
        }`}
      >
        <ViewGridIcon className="w-4 h-4 shrink-0" />
        <span>Grid</span>
      </button>
      <button
        type="button"
        onClick={() => setViewMode("list")}
        aria-pressed={viewMode === "list"}
        className={`flex items-center justify-center gap-1.5 sm:gap-2 rounded-[5px] px-2 sm:px-3 h-8 text-xs sm:text-sm font-medium transition-colors ${
          viewMode === "list"
            ? "bg-gray-800 text-white"
            : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
        }`}
      >
        <ViewListIcon className="w-4 h-4 shrink-0" />
        <span>List</span>
      </button>
    </div>
  );
}

export default memo(ViewToggle);