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

export function SupportCard({ onCancel }: { onCancel?: () => void }) {
  return (
    <Paper
      radius={16}
      p={22}
      bg="white"
      style={{
        border: "1px solid #E6ECF2",
        boxShadow: "0 1px 2px rgba(16,24,40,0.04)",
      }}
    >
      <Text
        fz="11px"
        fw={700}
        c="#6B7C8E"
        tt="uppercase"
        style={{ letterSpacing: "0.06em" }}
      >
        Need help?
      </Text>
      <Text mt={6} fz="15px" fw={700} c="#10202F">
        EDR operations team
      </Text>
      <Text mt={10} fz="13px" c="#6B7C8E" 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}
          variant="default"
          radius={10}
          leftSection={
            onCancel ? <XCircle size={16} /> : <FileText size={16} />
          }
          styles={{
            root: { height: 44, paddingInline: 16 },
            label: { fontWeight: 700, color: "#10202F" },
          }}
        >
          {onCancel ? "Cancel" : "Report"}
        </Button>
      </Group>
    </Paper>
  );
}
