import * as React from 'react'
import type { Settings } from '~/lib/types'

export function SiteFooter({ settings }: { settings: Settings }) {
  return (
    <footer className="w-full bg-surface-container-low py-space-xl">
      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-grid-gutter px-grid-margin text-on-surface-variant md:grid-cols-3">
        <div className="flex flex-col gap-space-sm">
          <span className="font-headline-md text-on-surface">{settings.brand}</span>
          <p className="text-body-sm">{settings.footer_about}</p>
        </div>
        <div className="flex flex-col gap-space-sm">
          <span className="font-headline-md text-on-surface">Location</span>
          <p className="text-body-sm">
            {settings.address_line}
            <br />
            {settings.city_line}
          </p>
        </div>
        <div className="flex flex-col gap-space-sm">
          <span className="font-headline-md text-on-surface">Hours</span>
          <p className="text-body-sm">{settings.hours_multiline}</p>
        </div>
      </div>
      <div className="mx-auto mt-space-lg max-w-7xl border-t border-outline-variant/20 px-grid-margin pt-space-md text-center text-body-sm text-on-surface-variant">
        © {new Date().getFullYear()} {settings.brand}. All rights reserved.
      </div>
    </footer>
  )
}
