import { useLoaderData } from "react-router-dom";
import { PersonCircle } from "react-bootstrap-icons";
import AddressesTable from "../../components/addresses_table";
import PaymentMethodsTable from "../../components/payment_methods_table";
import MainContentLayout from "../../components/main_content_layout";
import "../../components/stylesheets/shared.css";

export default function Account() {
  const response = useLoaderData();
  const full_name = response[0].data.data.attributes.first_name + ' ' + response[0].data.data.attributes.last_name
  const email = response[0].data.data.attributes.email
  const addresses = response[1].data.data;
  const payment_methods = response[2].data.data;

  return(
    <>
      <MainContentLayout>
        <div className="grid my-6 w-4/5 grid-cols-10 gap-2">
          <div className="w-2/5 col-span-1">
            <PersonCircle size={128} color="#394490"/>
          </div>
          <div className="grid grid-rows-3 col-span-9 mx-4">
            <div className="my-2">
              <h1 className="text-4xl">
              {full_name}  
              </h1>
            </div>
            <div className="text-2xl">
              <span className="mx-1 field_name">Correo electrónico:</span> {email}
            </div>
            <div>
              <a type="button" className="button text-white hover:bg-blue-300 hover:text-gray focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800" href="/account/edit">
                Editar
              </a>
            </div>
          </div>
        </div>
        <AddressesTable addresses={addresses}/>
        <PaymentMethodsTable payment_methods={payment_methods}/>
      </MainContentLayout>
    </>
  );
}