gitfor/platform

import { useId, useState } from "react";
import { useMarkdownPreview } from "~/hooks/use-markdown-preview";
import { Markdown } from "./ui/Primitives";
import { cn } from "~/utils/cn";

const TABS = [
  { id: "write", label: "Write" },
  { id: "preview", label: "Preview" },
] as const;

type Props = {
  value: string;
  onChange: (value: string) => void;
  owner?: string;
  repo?: string;
  placeholder?: string;
  rows?: number;
  label?: string;
};

export function MarkdownEditor({
  value,
  onChange,
  owner,
  repo,
  placeholder = "Leave a comment",
  rows = 6,
  label = "Comment",
}: Props) {
  const id = useId();
  const [tab, setTab] = useState<(typeof TABS)[number]["id"]>("write");
  const preview = useMarkdownPreview(owner ?? null, repo ?? null);

  function select(next: (typeof TABS)[number]["id"]) {
    setTab(next);
    if (next === "preview") preview.load(value);
  }

  return (
    <div className="overflow-hidden rounded-md border border-gray-700 bg-gray-900/70 focus-within:border-accent-500">