import { ChangeEvent } from "react";
import AppInput from "../AppInput";
import AppTextArea from "../AppTextArea";

interface ProductDetailsFormProps {
  productTitle: string;
  productDescription: string;
  onTitleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onDescriptionChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
}

export const ProductDetailsForm: React.FC<ProductDetailsFormProps> = ({
  productTitle,
  productDescription,
  onTitleChange,
  onDescriptionChange,
}: ProductDetailsFormProps) => {
  return (
    <div className="flex flex-col gap-6 p-4 border-b">
      {/* Product Title */}
      <AppInput
        inputTitle="عنوان محصول:"
        inputValue={productTitle}
        inputPlaceholder="مثل: تیشرت بیسیک"
        inputOnChange={onTitleChange}
        inputDir="rtl"
      />

      {/* Product Description */}
      <AppTextArea
        inputTitle="توضیحات:"
        inputValue={productDescription}
        inputPlaceholder="توضیحات محصول را اینجا وارد کنید..."
        inputOnChange={onDescriptionChange}
        inputDir="rtl"
      />
    </div>
  );
};