import React, { Component } from 'react';
import { useState, useEffect } from 'react';
import Button from './Button';
import Image from './Image';

const FightCard = () => {
  const [fights, setFights] = useState([]);
  useEffect(() => {
    fetch('/api/v1/recent-fights')
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setFights(data);
      });
  }, []);
  return (
    <div className="d-flex flex-row flex-wrap">
      {fights.map((fight, index) => (
        <div key={index} className="card col-md-3">
          <div className="card-header">
            <Image alt="headshot for ufc fighter" uri={fight.fighter_one_image} />
            <span id="versus">vs.</span>
            <Image alt="headshot for ufc fighter" uri={fight.fighter_two_image} />
          </div>
          <div className="card-body">
            <h4>{fight.fighter_one}</h4>
            <h4>{fight.fighter_two}</h4>
          </div>
          <div className="card-footer">
            <Button link={fight.url} classes="primary" />
          </div>
        </div>
      ))}
    </div>
  );
};
export default FightCard;

