"use client";

import { useActionState } from "react";
import { importStrongWorkout } from "./actions";

export function ImportForm() {
  const [state, formAction, pending] = useActionState(importStrongWorkout, null);

  return (
    <form action={formAction} className="flex flex-col gap-4">
      {state?.error ? (
        <div className="rounded-md border border-accent/40 bg-accent/10 px-4 py-3 text-sm text-fg">
          {state.error}
        </div>
      ) : null}
      <textarea
        name="text"
        rows={16}
        required
        placeholder={"Trening A\nWednesday, 10 June 2026 at 06:40\n\nDeadlift (Barbell)\nSet 1: 80 kg × 8\n..."}
        className="w-full rounded-md border border-white/10 bg-surface/55 shadow-lg shadow-black/10 backdrop-blur-md p-3 font-mono text-sm text-fg placeholder:text-fg/30 focus:border-accent focus:outline-none"
      />
      <button
        type="submit"
        disabled={pending}
        className="btn btn-primary self-start"
      >
        {pending ? "Importowanie..." : "Importuj"}
      </button>
    </form>
  );
}
