import React from "react";

/**
 * @param {{ view: 'list' | 'card', onChange: (view: 'list' | 'card') => void }} props
 */
export default function AssignmentViewToggle({ view, onChange }) {
  return (
    <div className="swi-view-toggle" role="group" aria-label="Assignment view">
      <button
        type="button"
        className={`swi-view-toggle__btn${view === "list" ? " is-active" : ""}`}
        aria-pressed={view === "list"}
        onClick={() => onChange("list")}
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
          <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
        </svg>
        List view
      </button>
      <button
        type="button"
        className={`swi-view-toggle__btn${view === "card" ? " is-active" : ""}`}
        aria-pressed={view === "card"}
        onClick={() => onChange("card")}
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
          <rect x="3" y="3" width="7" height="9" rx="1" />
          <rect x="14" y="3" width="7" height="5" rx="1" />
          <rect x="14" y="12" width="7" height="9" rx="1" />
          <rect x="3" y="16" width="7" height="5" rx="1" />
        </svg>
        Card view
      </button>
    </div>
  );
}
