import type { BlogPostCommentForm } from "@/data/blog-post-detail";
import Image from "next/image";

export default function BlogPostCommentForm({ form }: { form: BlogPostCommentForm }) {
  return (
    <div className="comment-respond">
      <h3 className="comment-reply-title">{form.title}</h3>
      <p className="comment-notes">{form.notes}</p>
      <form className="comment-form">
        <div className="row">
          {form.fields.map((field) => (
            <div key={field.id} className={field.columnClass}>
              <div className="form-group">
                {field.kind === "textarea" ? (
                  <textarea
                    id={field.id}
                    name={field.name}
                    rows={field.rows}
                    placeholder={field.placeholder}
                    defaultValue=""
                  />
                ) : (
                  <input
                    type={field.kind}
                    id={field.id}
                    name={field.name}
                    placeholder={field.placeholder}
                    required={field.required === true}
                  />
                )}
              </div>
            </div>
          ))}
          <div className="col-lg-12">
            <div className="radio-btn">
              <input
                type={form.rememberRow.inputType}
                id={form.rememberRow.inputId}
                name={form.rememberRow.name}
                defaultValue={form.rememberRow.value}
              />
              <label htmlFor={form.rememberRow.inputId}>{form.rememberRow.label}</label>
            </div>
          </div>
          <div className="col-lg-12">
            <button type="submit" className="btn-style1">
              {form.submit.label}
              <span>
                <Image
                  src={form.submit.arrow.src}
                  alt={form.submit.arrow.alt}
                  width={form.submit.arrow.width}
                  height={form.submit.arrow.height}
                />
              </span>
            </button>
          </div>
        </div>
      </form>
    </div>
  );
}