import Button from "@/components/button";
import { Center, ElementProps, SimpleGrid, Text } from "@mantine/core";
import { UserPlusIcon } from "@phosphor-icons/react";
import { Trans } from "@lingui/react/macro";

const NewPlayerButton: React.FC<ElementProps<"button">> = ({ onClick }) => {
  return <Button
    p='xs'
    w='45%'
    h='fit-content'
    onClick={onClick}
    variant='outline'
  >
    <SimpleGrid>
      <Center>
        <UserPlusIcon size='3rem' />
      </Center>
      <Text size='md' fw={600}><Trans>New Player</Trans></Text>
    </SimpleGrid>
  </Button>
};

export default NewPlayerButton;