import countryList from "react-select-country-list";
import "./stylesheets/company_details.css";
import { Link } from "react-router-dom";

export default function CompanyDetails({ company }) {
  return(
  <>
    <div className="flex w-3/5 my-4">
      <img className="mx-2 company-logo" src={company.attributes.logo}/>
      <div className="relative overflow-x-auto">
        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
          <thead>
            <tr>
              <th scope="col" className="company-details-text font-bold text-2xl px-6 py-4 hover:text-neutral-700">
                <Link to={`/products?company=${company.attributes.short_name}`}>
                  {company.attributes.name}
                </Link>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
              <th scope="row" className="px-6 py-4 font-medium company-details-text whitespace-nowrap dark:text-white">
                País
              </th>
              <td className="px-6 py-4">
                {countryList().getLabel(company.attributes.country)}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </>
  );
}