"use client";

import formStyles from "@/components/catalog/CatalogForm.module.css";
import styles from "./SeoMetaFields.module.css";

const TITLE_MAX = 70;
const DESCRIPTION_MAX = 160;

/** Optional SEO overrides — same control used by Meshkee category/content forms. */
export default function SeoMetaFields({
  seoMetaTitle,
  seoMetaDescription,
  onTitleChange,
  onDescriptionChange,
  disabled = false,
  showHeading = true,
}: {
  seoMetaTitle: string;
  seoMetaDescription: string;
  onTitleChange: (value: string) => void;
  onDescriptionChange: (value: string) => void;
  disabled?: boolean;
  showHeading?: boolean;
}) {
  return (
    <div className={styles.block}>
      {showHeading ? <h3 className={styles.heading}>SEO</h3> : null}
      <p className={styles.hint}>
        Optional overrides for search results. Leave blank to use the category
        name and description.
      </p>
      <label className={formStyles.field}>
        <span>
          SEO title <em className={formStyles.optional}>(optional)</em>
        </span>
        <input
          type="text"
          value={seoMetaTitle}
          disabled={disabled}
          maxLength={TITLE_MAX}
          placeholder="Custom title for search engines"
          onChange={(event) =>
            onTitleChange(event.target.value.slice(0, TITLE_MAX))
          }
        />
        <span className={styles.counter}>
          {seoMetaTitle.length} / {TITLE_MAX}
        </span>
      </label>
      <label className={formStyles.field}>
        <span>
          SEO description <em className={formStyles.optional}>(optional)</em>
        </span>
        <textarea
          rows={3}
          value={seoMetaDescription}
          disabled={disabled}
          maxLength={DESCRIPTION_MAX}
          placeholder="Custom description for search engines"
          onChange={(event) =>
            onDescriptionChange(event.target.value.slice(0, DESCRIPTION_MAX))
          }
        />
        <span className={styles.counter}>
          {seoMetaDescription.length} / {DESCRIPTION_MAX}
        </span>
      </label>
    </div>
  );
}