"use client";

import addDataSource from "@/action/addDataSource";
import StatusButton from "@/components/global/status-button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { User } from "next-auth";
import { useActionState } from "react";

const initialState = {
  message: "",
};

type DataFormProps = {
  data: {
    dataSource: string | null;
  } | null;
  user: User;
};

const DataForm = ({ data, user }: DataFormProps) => {
  const [state, formAction] = useActionState(addDataSource, initialState);
  return (
    <form action={formAction} className="flex w-full flex-col gap-y-6">
      <Input type="hidden" name="id" value={user.id} />
      <Textarea
        rows={20}
        placeholder="Paste your notes..."
        name="data-source"
        defaultValue={data?.dataSource! || ""}
        maxLength={80000}
        minLength={6000}
        required
      />
      <StatusButton defaultText="Save data" pendingText="Saving..." />
      <p>{state?.message}</p>
      <p className="text-center text-xs text-muted-foreground">
        <b>Note:</b> Support for .docx, .pdf and all the common image formats is
        coming soon.
      </p>
    </form>
  );
};

export default DataForm;

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_5__.useActionState) is not a function or its return value is not iterable