{"size": 1100, "ext": "js", "max_stars_repo_path": "part2/countries/src/components/Countries.js", "max_stars_repo_name": "Pia-N/fullstack-course-2021", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "part2/countries/src/components/Countries.js", "max_issues_repo_name": "Pia-N/fullstack-course-2021", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "part2/countries/src/components/Countries.js", "max_forks_repo_name": "Pia-N/fullstack-course-2021", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 20.3703703704, "max_line_length": 60, "alphanum_fraction": 0.5163636364}
import React from 'react'
import Button from './Button'
import Country from './Country'


const Countries  = (props) => {
const {countries, filter, setFilter} = props
    console.log(countries, "maat lista");
    console.log(filter, "tämä on filter");

    if(filter === '' || countries.length === 0){
        return (
          <div>No search item given</div>
        )
     }
    else if(countries.length >= 10)
    {
    return (
    <div>
        Too many matches, please specify filter.
    </div>
    )
    }
    else if (countries.length > 1){
    return(
      countries.map((country) =>
      <div key={country.numericCode}>
        {country.name}
        <Button country = {country} setFilter={setFilter} />
        </div>)
    )
    }
    else if (countries.length === 1)
    {
    return (
      <div>
      <Country country = {countries[0]} />
      </div>
      )
    }
    else 
    {
     return (
        <div>
        {countries.map ((country) => 
        <p key = {country.numericCode}>{country.name} </p>)}
        </div>
     )
    }
    
        
}
  
  export default Countries