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;
  extra?: ReactNode;
  children: ReactNode;
}

/** Consistent flat card with a minimal icon + title header used by every detail section. */
export function SectionCard({ icon: Icon, title, extra, children }: SectionCardProps) {
  return (
    <Paper radius="md" withBorder style={detailStyles.card}>
      <Group justify="space-between" px="xl" py="md" style={detailStyles.cardHeader}>
        <Group gap="sm">
          <Icon size={16} color="var(--mantine-color-gray-6)" />
          <Text fw={600} size="sm" c="dark">
            {title}
          </Text>
        </Group>
        {extra}
      </Group>
      <Box px="xl" py="lg">
        {children}
      </Box>
    </Paper>
  );
}
