import { FC } from "react"
import Link from "next/link"
import { Anchor, Group, Title } from "@mantine/core"
import AuthBlock from "../AuthBlock"
import { ThemeSchemeControl } from "../ThemeSchemeControl"

interface HeaderProps {
  title: string
  backLink?: { href: string; label: string }
}

const Header: FC<HeaderProps> = ({ title, backLink }) => {
  return (
    <Group justify="space-between" align="center" wrap="wrap" gap="md">
      <Group gap="md" wrap="wrap" align="center">
        {backLink ? (
          <Anchor
            component={Link}
            href={backLink.href}
            size="sm"
            underline="hover"
          >
            {backLink.label}
          </Anchor>
        ) : null}
        <Title order={3} size="h4" fw={600}>
          {title}
        </Title>
      </Group>
      <Group gap="md" wrap="wrap" align="center" justify="flex-end">
        <AuthBlock />
        <ThemeSchemeControl />
      </Group>
    </Group>
  )
}

export default Header