import React from 'react';

import { useAppSelector } from '../stores/hooks';

export const RichTextField = ({ field, form }) => {
  const darkMode = useAppSelector((state) => state.style.darkMode);

  const handleChange = (event) => {
    form.setFieldValue(field.name, event.target.value);
  };

  return (
    <textarea
      name={field.name}
      value={field.value || ''}
      onBlur={field.onBlur}
      onChange={handleChange}
      rows={8}
      className={`min-h-44 w-full rounded-xl border px-4 py-3 text-sm leading-6 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 ${
        darkMode
          ? 'border-slate-600 bg-slate-800 text-white'
          : 'border-slate-300 bg-white text-slate-950'
      }`}
      placeholder='Write product notes, category description, specs, or buyer-facing instructions.'
    />
  );
};
