import * as React from "react";
import { useState } from "react";
import { Frame } from "framer";

export function SpotifySearch() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  const searchSongs = async () => {
    if (!query) return;
    setLoading(true);

    const res = await fetch(
      `https://clairaudio-spotify-api.info5705.repl.co/search?q=${encodeURIComponent(query)}`
    );
    const data = await res.json();
    setResults(data);
    setLoading(false);
  };

  return (
    <Frame background="white" padding={20} width="100%" height="auto">
      <input
        type="text"
        value={query}
        placeholder="Search Spotify..."
        onChange={(e) => setQuery(e.target.value)}
        style={{ width: "100%", padding: 10, fontSize: 16 }}
      />
      <button onClick={searchSongs} style={{ marginTop: 10 }}>Search</button>

      {loading && <p>Loading...</p>}

      <ul style={{ marginTop: 20, padding: 0 }}>
        {results.map((track) => (
          <li key={track.id} style={{ marginBottom: 20, listStyle: "none" }}>
            <img
              src={track.album.images[2]?.url}
              alt="album"
              style={{ width: 50, height: 50, borderRadius: 6 }}
            />
            <div style={{ marginTop: 6 }}>
              <strong>{track.name}</strong> by {track.artists.map(a => a.name).join(", ")}<br />
              <a href={track.external_urls.spotify} target="_blank" rel="noreferrer">
                Listen on Spotify
              </a><br />
              {track.preview_url && (
                <audio controls src={track.preview_url} style={{ marginTop: 4, width: "100%" }} />
              )}
            </div>
          </li>
        ))}
      </ul>
    </Frame>
  );
}