"use client";

import Link from "next/link";
import { Textarea } from "@/components/ui/Textarea";

interface MarkdownTextareaProps {
  id: string;
  label: string;
  value: string;
  onChange: (text: string) => void;
  placeholder?: string;
  minHeightClass?: string;
}

export function MarkdownTextarea({
  id,
  label,
  value,
  onChange,
  placeholder,
  minHeightClass,
}: MarkdownTextareaProps) {
  return (
    <div className="flex flex-col gap-1.5">
      <div className="flex items-baseline justify-between gap-2">
        <label htmlFor={id} className="text-sm font-semibold text-ink">
          {label}
        </label>
        <Link
          href="/documentation"
          className="text-xs text-muted underline-offset-2 hover:text-accent hover:underline"
        >
          Syntaxe Markdown
        </Link>
      </div>
      <Textarea
        id={id}
        role="tabpanel"
        aria-labelledby={`tab-${id.replace("textarea-", "")}`}
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder={placeholder}
        className={minHeightClass}
      />
    </div>
  );
}