import { Button } from "./Button.tsx";
import { Content } from "./Content.tsx";

export function MCProperties(
  { properties }: { properties: Map<string, string> },
) {
  return (
    <div className="container p-8">
      <Content>
        <form method="POST" action="/properties">
          <div class="grid grid-cols-3 gap-y-4 gap-x-16">
            {Array.from(properties.entries()).sort(([a],[b]) => a > b ? 1 : -1).map(([k, v]) => (
              <div>
                <label class="block font-pixel text-lg" htmlFor={k}>{k}</label>
                <input class="w-full" type="text" name={k} value={v} autocomplete="off" />
              </div>
            ))}
          </div>
          <div class="mt-8">
            <Button type="submit">
              Save
            </Button>
          </div>
        </form>
      </Content>
    </div>
  );
}