import React, { ReactNode } from 'react'
import { containerMaxW, creatorBrandName, creatorCoCreatorName, creatorIdeaAuthor, creatorWebsite } from '../config'
import Logo from './Logo'

type Props = {
  children?: ReactNode
}

export default function FooterBar({ children }: Props) {
  const year = new Date().getFullYear()

  return (
    <footer className={`py-2 px-6 ${containerMaxW}`}>
      <div className="block md:flex items-center justify-between">
        <div className="text-center md:text-left mb-6 md:mb-0">
          <b>
            &copy;{year},{` `}
            <a href={creatorWebsite} rel="noreferrer" target="_blank">
              {creatorBrandName}
            </a>
            .
          </b>
          <span className="block text-sm text-slate-500 dark:text-slate-400 md:inline md:ml-2">
            Полноценное веб-приложение для AI-ролевых историй.
          </span>
          {children && <span className="block text-sm md:inline md:ml-2">{children}</span>}
          <div className="mt-2 text-xs text-slate-500 dark:text-slate-400">
            Идеи — {creatorIdeaAuthor}. Реализация — <a href={creatorWebsite} rel="noreferrer" target="_blank">{creatorBrandName}</a> и {creatorCoCreatorName}.
          </div>
          <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">
            На базе <a href="https://flatlogic.com/" rel="noreferrer" target="_blank">Flatlogic</a>
          </div>
        </div>

        <div className="flex items-center md:py-2 gap-4">
          <a href={creatorWebsite} rel="noreferrer" target="_blank">
            <Logo className="mx-auto" />
          </a>
        </div>
      </div>
    </footer>
  )
}