import { useLicenseCode } from "@/hooks/use-license-code";
import { ActionIcon, Box, Flex, Group, Paper, Title, Tooltip } from "@mantine/core";
import { IconCopy } from "@tabler/icons-react";
import classes from "./LicenseCode.module.css";

export function LicenseCode() {
  const [licenseCode] = useLicenseCode();
  return (
    <Paper shadow="md" p="lg" className={classes["container"]}>
      <Flex direction="column" justify="flex-start" align="stretch" gap="md">
        <Group justify="space-between">
          <Title order={4}>授权码</Title>
          <Tooltip label="复制授权码" position="top">
            <ActionIcon>
              <IconCopy size={16} />
            </ActionIcon>
          </Tooltip>
        </Group>
        <Box className={classes["license-code-area"]} c="green">
          {licenseCode}
        </Box>
      </Flex>
    </Paper>
  );
}