import { Link } from "react-router-dom"
import { FaMeta } from "react-icons/fa6";
import { FaXTwitter } from "react-icons/fa6";
import { FaThreads } from "react-icons/fa6";
import { FaInstagram } from "react-icons/fa6";
import { FaLocationDot } from "react-icons/fa6";
import { FaPhoneAlt } from "react-icons/fa";

const Footer = () => {
  return (
    <footer className="bg-gray-50">
        <div className="max-w-6xl mx-auto pr-6 pl-6 pb-4">
            <div className="grid w-full justify-between sm:flex sm:justify-between md:flex md:grid-cols-1">
                <Link>
                    <p className="text-blue-900 text-lg uppercase tracking-wide font-serif pt-10">Chicagoland</p>
                </Link>
                <div className="grid grid-cols-2 gap-10 pt-10 md:grid-cols-3">
                    <div className="flex flex-col">
                        <p className="uppercase text-blue-900 font-semibold text-sm">About us</p>
                        <div className="mt-2">
                            <p className="text-sm mt-1 text-gray-800">All properties</p>
                            <p className="text-sm mt-1 text-gray-800">Featured properties</p>
                            <p className="text-sm mt-1 text-gray-800">About chicago</p>
                            <p className="text-sm mt-1 text-gray-800">Why us</p>
                        </div>
                    </div>

                    <div className="flex flex-col">
                        <p className="uppercase text-blue-900 font-semibold text-sm">services</p>
                        <div className="mt-2">
                            <p className="text-sm mt-1 text-gray-800">Help & FAQs</p>
                            <p className="text-sm mt-1 text-gray-800">Knowledgebase</p>
                            <p className="text-sm mt-1 text-gray-800">New Feeds</p>
                            <p className="text-sm mt-1 text-gray-800">Career</p>
                        </div>
                    </div>

                    <div className="flex flex-col">
                        <p className="uppercase text-blue-900 font-semibold text-sm">Contact</p>
                        <div className="mt-2">
                            <div className="flex gap-2 mt-1 text-gray-800">
                                <FaLocationDot className="text-xs"/>
                                <p className="text-sm"> 1234 Street Name,<br/>Chicago, IL 98765</p>
                            </div>
                            <div className="flex gap-2 mt-1 text-gray-800">
                                <FaPhoneAlt className="text-xs"/>
                                <p className="text-sm">(123) 456 - 7890</p>
                            </div>
                        </div>    
                    </div>
                </div>
            </div>
            <div className="border-t-2 mt-6">
                <div className="w-full sm:flex sm:items-center sm:justify-between">
                    <div className="text-xs my-6 text-gray-600 tracking-wider">&copy; 2024 Chicagoland</div>
                    <div className="mt-4 flex space-x-6 sm:mt-0 sm:justify-center">
                        <Link className="text-gray-600"><FaMeta/></Link>
                        <Link className="text-gray-600"><FaXTwitter/></Link>
                        <Link className="text-gray-600"><FaThreads/></Link>
                        <Link className="text-gray-600"><FaInstagram/></Link>
                    </div>
                </div>
            </div>
        </div>
    </footer>
  )
}

export default Footer