"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-muted/40 bg-surface p-3 font-mono text-sm text-fg placeholder:text-fg/30 focus:border-accent focus:outline-none"
      />
      <button
        type="submit"
        disabled={pending}
        className="self-start rounded-md bg-accent px-4 py-2 text-sm font-semibold text-fg transition-opacity hover:opacity-90 disabled:opacity-50"
      >
        {pending ? "Importowanie..." : "Importuj"}
      </button>
    </form>
  );
}