"use client"
import Link from 'next/link'
import { FaFacebookF, FaYoutube } from "react-icons/fa";
import { RiInstagramFill } from "react-icons/ri";
import { SettingsProps } from '@/types';

const Footer = ({ settings }: { settings: SettingsProps }) => {
    return (
        <footer className="rounded-lg  py-8">
            <div className="container mx-auto px-4">
                <div className="flex flex-col sm:flex-row items-center justify-between">
                    <Link className="mb-4 sm:mb-0 flex justify-center sm:justify-start"
                        href="/">
                        <img src="/images/logo.png" width={170} height={170} alt="logo" />
                    </Link>
                    <div className="text-center mb-4 sm:mb-0">
                        <span className="text-xs text-black">
                            Copyright @ 2024 <a href="https://flowbite.com/" className="hover:underline">All In One</a> All Rights Reserved.
                        </span>
                    </div>
                    <div className="flex flex-row items-center space-x-4 mt-7 lg:mt-0 md:mt-0">
                        <div className="bg-[#DCCECF] rounded-full h-8 w-8 flex items-center justify-center hover:bg-mainColor"
                            onClick={() => window.open(settings.facebook)}>
                            <FaFacebookF className="w-4 h-4 cursor-pointer text-[#F6E5E9]" />
                        </div>
                        <div className="bg-[#DCCECF] rounded-full h-8 w-8 flex items-center justify-center hover:bg-mainColor"
                            onClick={() => window.open(settings.instagram)}>
                            <RiInstagramFill className="w-4 h-4 cursor-pointer text-[#F6E5E9]" />
                        </div>
                        <div className="bg-[#DCCECF] rounded-full h-8 w-8 flex items-center justify-center hover:bg-mainColor"
                            onClick={() => window.open(settings.youtube)}>
                            <FaYoutube className="w-4 h-4 cursor-pointer text-[#F6E5E9]" />
                        </div>
                    </div>
                </div>
            </div>
        </footer>


    )
}

export default Footer