import { useState } from "react";
import { invoke } from "@tauri-apps/api/core";

export function Greet() {
  const [greeting, setGreeting] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    // Learn more about Tauri commands at https://v2.tauri.app/develop/calling-rust/
    setGreeting(await invoke("greet", { name }));
  }

  return (
    <div className="flex flex-col items-center justify-center h-full gap-3">
      <form
        className="flex gap-2 w-full max-w-md"
        onSubmit={(e) => {
          e.preventDefault();
          greet();
        }}
      >
        <input
          className="flex-1 rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)] text-sm font-[var(--font-sans)]"
          onChange={(e) => setName(e.target.value)}
          placeholder="Enter a name…"
          value={name}
        />
        <button
          type="submit"
          className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer"
        >
          Greet
        </button>
      </form>
      {greeting && (
        <p className="text-[var(--color-text-secondary)] text-sm font-[var(--font-mono)]">
          {greeting}
        </p>
      )}
    </div>
  );
}