import { useRouter } from "next/router";

import { Avatar, Button, Paper, Text, useMantineTheme } from "@mantine/core";

import { Icon, ICONS } from "vseth-canine-ui";

export default function BoardMemberCard({ entry }) {
  const theme = useMantineTheme();
  const { locale } = useRouter();

  return (
    <Paper
      radius="md"
      withBorder
      p="lg"
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        flexGrow: 1,
      }}
      shadow="sm"
    >
      <div>
        <Avatar src={entry.image} size={120} radius={20} mx="auto" />
        <Text ta="center" fz="lg" weight={500} mt="md">
          {entry.name}
        </Text>
        <Text ta="center" c="dimmed" fz="sm">
          {entry.mail ? entry.mail + " • " : ""}
          {entry.role[locale || "en"]}
        </Text>
      </div>

      {entry.mail && (
        <div>
          <a href={"mailto:" + entry.mail} style={{ textDecoration: "none" }}>
            <Button
              leftIcon={<Icon icon={ICONS.EMAIL} color="black" />}
              variant="default"
              fullWidth
              mt="md"
            >
              Send message
            </Button>
          </a>
        </div>
      )}
    </Paper>
  );
}