import { useState } from "react";

const projectTypes = ["model", "dataset", "space"];

/**
 * 1. User click enter key
 * 2. Get model/dataset/space name
 * 3. Get data from API
 * 4. Format data(to 20 points at most)
 * 5. Draw line chart
 */
function App() {
  const [projectType, setProjectType] = useState("model");
  const [projectName, setProjectName] = useState("meta-llama/Llama-2-7b");

  return (
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16">
      <div className="mx-auto max-w-3xl">
        <h1 className="text-sm font-light right-0 text-right text-gray-600">
          View the like history of a project on huggingface <span className="text-lg">🤗</span>
        </h1>
        <div>
          <div className="relative mt-2 rounded-md shadow-sm">
            <div className="absolute inset-y-0 left-0 flex items-center">
              <label htmlFor="country" className="sr-only">
                Country
              </label>
              <select
                id="country"
                name="country"
                autoComplete="country"
                className="h-full rounded-md border-0 bg-transparent py-0 pl-3 pr-7 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm"
              >
                <option>Model</option>
                <option>Dataset</option>
                <option>Space</option>
              </select>
            </div>
            <input
              type="text"
              name="phone-number"
              id="phone-number"
              className="block w-full rounded-md border-0 py-1.5 pl-24 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
              placeholder="meta-llama/Llama-2-7b"
            />
          </div>
        </div>

        <svg className="line-chart"></svg>
      </div>
    </div>
  );
}

export default App;