import { useState } from "react";

interface SourceUrlFormProps {
  onSubmit: (url: string) => Promise<void> | void;
  disabled?: boolean;
}

export function SourceUrlForm({ onSubmit, disabled }: SourceUrlFormProps) {
  const [url, setUrl] = useState("");

  return (
    <form
      className="space-y-4 rounded-xl border border-border bg-bg-card p-4 md:p-5"
      onSubmit={async (event) => {
        event.preventDefault();
        if (!url.trim()) return;
        await onSubmit(url.trim());
      }}
    >
      <div className="space-y-1">
        <label
          htmlFor="source-url"
          className="block text-sm font-medium text-text-primary"
        >
          Paste a track link
        </label>
        <p className="text-sm text-text-secondary">
          Supports single YouTube videos, YouTube Music tracks, and Spotify
          track links.
        </p>
      </div>

      <input
        id="source-url"
        type="url"
        value={url}
        onChange={(event) => setUrl(event.target.value)}
        placeholder="https://www.youtube.com/watch?v=..."
        disabled={disabled}
        className="w-full rounded-xl border border-border bg-bg-primary px-4 py-3 text-sm text-text-primary outline-none transition-colors placeholder:text-text-secondary focus:border-accent disabled:opacity-50"
      />

      <button
        type="submit"
        disabled={disabled || !url.trim()}
        className="w-full rounded-xl bg-accent px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-accent-hover disabled:cursor-not-allowed disabled:opacity-50"
      >
        Fetch track
      </button>
    </form>
  );
}