import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import api from '../../services/api'
import './style.css'


export default function Dashboard() {
  const [Spots, setSpots] = useState([])
  useEffect(() => {
    async function LoadSpots() {
      const user_id = localStorage.getItem('user')
      const response = await api.get('/dashboard', {
        headers: { user_id }
      })
      setSpots(response.data)
    }
    LoadSpots()
  }, [])

  return (
    <>
      <ul className="spotList">
        {Spots.map(Spot => (
          <li key={Spot._id}>
            <header style={{ backgroundImage: `url(${Spot.thumbnail_url})` }} />
            <strong>{Spot.company}</strong>
            <span>{Spot.price ? `$${Spot.price}/day` : 'FREE'}</span>
          </li>
        ))}
      </ul>
      <Link to="/new">
        Cadastrar novo spot
      </Link>
    </>
  )
}