import { Card, Flex, Image, Text, UnstyledButton } from "@mantine/core";
import { IconArrowRight } from "@tabler/icons-react";

export default function EntryCard({ label, href, icon }) {
  return (
    <Card
      shadow="sm"
      p="lg"
      withBorder
      radius="md"
      style={{
        position: "relative",
        aspectRatio: "1 / 1",
        transition: "transform 0.2s, box-shadow 0.2s",
      }}
      sx={(theme) => ({
        '&:hover': {
          transform: 'translateY(-4px)',
          boxShadow: theme.shadows.md,
        },
      })}
    >
      {/* 图标 + 标题 居中 */}
      <Flex
        direction="column"
        align="center"
        justify="center"
        style={{ flex: 1, textAlign: "center", gap: "12px", height: "100%" }}
      >
        <Image src={icon} alt={label} width={48} height={48} fit="contain" />
        <Text fw={600}>{label}</Text>
      </Flex>

      {/* 悬浮圆形箭头按钮 + 动画效果 */}
      <UnstyledButton
        component="a"
        href={href}
        target="_blank"
        rel="noopener noreferrer"
        style={{
          position: "absolute",
          bottom: 16,
          right: 16,
          width: 40,
          height: 40,
          borderRadius: "50%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "rgba(0, 0, 0, 0.05)",
          transition: "background-color 0.2s, transform 0.2s",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.15)";
          e.currentTarget.style.transform = "translateX(4px)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
          e.currentTarget.style.transform = "translateX(0)";
        }}
      >
        <IconArrowRight size={18} />
      </UnstyledButton>
    </Card>
  );
}
