import { Box, Button, Group, Paper, Text } from "@mantine/core";
import { FileText, MessageSquare, XCircle } from "lucide-react";

export function SupportCard({ onCancel }: { onCancel?: () => void }) {
  return (
    <Paper radius={20} p={22} bg="#0C1A2B">
      <Group gap={12} align="center" wrap="nowrap">
        <Box
          style={{
            width: 42,
            height: 42,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            borderRadius: 12,
            backgroundColor: "#16273A",
          }}
        >
          <MessageSquare size={20} color="#fff" />
        </Box>
        <Box>
          <Text fz="15px" fw={800} c="#fff">
            Need help?
          </Text>
          <Text fz="12px" c="#9AA8B5">
            EDR operations team
          </Text>
        </Box>
      </Group>
      <Text mt={14} fz="13px" c="#C4D0DB" style={{ lineHeight: 1.45 }}>
        Questions about this shipment, documents, or delivery? Our operations
        team can help.
      </Text>
      <Group gap={10} mt="md" wrap="nowrap">
        <Button
          flex={1}
          color="edr-green"
          radius={10}
          leftSection={<MessageSquare size={16} />}
          styles={{ root: { height: 44 }, label: { fontWeight: 700 } }}
        >
          Contact
        </Button>
        <Button
          onClick={onCancel}
          radius={10}
          color="#16273A"
          leftSection={
            onCancel ? <XCircle size={16} /> : <FileText size={16} />
          }
          styles={{
            root: { height: 44, paddingInline: 16 },
            label: { fontWeight: 700, color: "#fff" },
          }}
        >
          {onCancel ? "Cancel" : "Report"}
        </Button>
      </Group>
    </Paper>
  );
}
