edr-platform/apps/edr-freight-web/backoffice/src/components/bookings/detail/SectionCard.tsx

import type { LucideIcon } from "lucide-react";
import type { ReactNode } from "react";
import { Paper, Group, Text, Box } from "@mantine/core";

import { detailStyles } from "./booking-detail.styles";

export interface SectionCardProps {
  icon: LucideIcon;
  title: string;
  /** Optional one-line context shown under the title. */
  subtitle?: string;
  /** Mantine palette key used to tint the icon chip (default brand green). */
  accent?: string;
  extra?: ReactNode;
  children: ReactNode;
}

/** Consistent card with a colored icon chip header used by every detail section. */
export function SectionCard({
  icon: Icon,
  title,
  subtitle,
  accent = "edr-green",
  extra,
  children,
}: SectionCardProps) {
  return (
    <Paper radius="md" withBorder style={{ ...detailStyles.card, overflow: "hidden" }}>
      <Group
        justify="space-between"
        px="xl"
        py="md"
        wrap="nowrap"
        style={detailStyles.cardHeader}
      >
        <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
          <Box
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              width: 34,
              height: 34,
              borderRadius: 10,
              flexShrink: 0,
              background: `var(--mantine-color-${accent}-1)`,
              color: `var(--mantine-color-${accent}-7)`,
              border: `1px solid var(--mantine-color-${accent}-2)`,
            }}
          >
            <Icon size={17} strokeWidth={2} />
          </Box>
          <Box style={{ minWidth: 0 }}>
            <Text fw={600} size="sm" c="dark" truncate>
              {title}
            </Text>
            {subtitle ? (
              <Text size="xs" c="dimmed" truncate>
                {subtitle}
              </Text>
            ) : null}
          </Box>
        </Group>
        {extra}
      </Group>
      <Box px="xl" py="lg">
        {children}
      </Box>
    </Paper>
  );
}