edr-platform/apps/edr-freight-web/backoffice/src/components/trainScheduling/SchedulingWorkflowHeader.tsx

import { Badge, Group, Paper, Progress, Stack, Text, ThemeIcon } from "@mantine/core";
import type { LucideIcon } from "lucide-react";
import {
  CheckCircle2,
  Container,
  LayoutGrid,
  Link2,
  Package,
} from "lucide-react";


const stepIcons: Record<string, LucideIcon> = {
  package: Package,
  layout: LayoutGrid,
  container: Container,
  link: Link2,
  check: CheckCircle2,
};

export function SchedulingWorkflowHeader({
  title,
  subtitle,
  activeStep,
  totalSteps,
  stepLabel,
  stepDescription,
  stepIcon = "package",
}: {
  title: string;
  subtitle?: string;
  activeStep: number;
  totalSteps: number;
  stepLabel: string;
  stepDescription?: string;
  stepIcon?: keyof typeof stepIcons;
}) {
  const Icon = stepIcons[stepIcon] ?? Package;
  const progress = totalSteps > 0 ? Math.round(((activeStep + 1) / totalSteps) * 100) : 0;

  return (
    <Paper
      p="md"
      radius="xl"
      withBorder
      style={{
        background:
          "linear-gradient(180deg, var(--mantine-color-white) 0%, var(--mantine-color-gray-0) 100%)",
      }}
    >
      <Group justify="space-between" align="flex-start" wrap="wrap" gap="md">
        <Group gap="md" align="flex-start">
          <ThemeIcon size={42} radius="xl" variant="gradient" gradient={{ from: "edr-green", to: "teal", deg: 135 }}>
            <Icon size={20} />
          </ThemeIcon>
          <Stack gap={4}>
            <Text fw={700} size="lg">
              {title}
            </Text>
            {subtitle ? (
              <Text size="sm" c="dimmed">
                {subtitle}
              </Text>
            ) : null}
          </Stack>
        </Group>
        <Badge size="lg" variant="light" color="edr-green">
          Step {activeStep + 1} of {totalSteps}
        </Badge>
      </Group>

      <Stack gap={6} mt="md">
        <Group justify="space-between">
          <Text size="sm" fw={600}>
            {stepLabel}
            {stepDescription ? (
              <Text span c="dimmed" fw={400}>
                {" "}
                · {stepDescription}
              </Text>
            ) : null}
          </Text>
          <Text size="xs" c="dimmed">
            {progress}%
          </Text>
        </Group>
        <Progress value={progress} size="sm" radius="xl" color="edr-green" />
      </Stack>
    </Paper>
  );
}