import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee, faHeart, faCode } from "@fortawesome/free-solid-svg-icons";

function Footer() {
    return (
        <div className="bg-background-tertiary text-copy-primary flex flex-row sm:flex-col sm:text-center sm:justify-around justify-between bg-gray-800 h-32">
            <div className="container flex flex-col justify-center ml-12 sm:ml-0">
                <p className="text-gray-100 text-sm sm:text-xs mb-1">
                    Powered by MealDB
                </p>
                <p className="text-gray-500 text-lg sm:text-sm">
                    Proudly built with ⚛
                </p>
            </div>
            <div className="container flex flex-col justify-center mr-12 sm:text-center text-right text-gray-500 text-lg">
                <p className="text-sm sm:text-xs text-white mb-1">
                    <FontAwesomeIcon icon={faCode} size="1x" /> by{" "}
                    <a href="https://twitter.com/heytulsiprasad">
                        @heytulsiprasad
                    </a>
                </p>
                <p className="text-md sm:text-sm">
                    Made possible by
                    <span className="text-gray-400 mx-2">
                        <FontAwesomeIcon icon={faCoffee} size="1x" />
                    </span>
                    and
                    <span className="text-gray-400 ml-2">
                        <FontAwesomeIcon icon={faHeart} size="1x" />
                    </span>
                </p>
            </div>
        </div>
    );
}

export default Footer;