"use client";

import { type ChangeEvent } from "react";
import clsx from "clsx";

interface MarkdownEditorProps {
  value: string;
  onChange: (value: string) => void;
  className?: string;
}

export function MarkdownEditor({ value, onChange, className }: MarkdownEditorProps) {
  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
    onChange(e.target.value);
  };

  return (
    <textarea
      value={value}
      onChange={handleChange}
      placeholder="Write your content in Markdown..."
      className={clsx(
        "w-full h-full resize-none bg-transparent font-mono text-sm leading-relaxed focus:outline-none placeholder:text-neutral-400",
        className
      )}
    />
  );
}