import { Box, Group, Skeleton, Text } from "@mantine/core";
import { memo } from "react";
import type { Currency } from "@/pages/billing/invoices.mock";
import { formatCurrency } from "@/pages/billing/invoices.mock";
import { formatPct } from "../constants";
import { Card } from "./Card";

interface FreightVolumeSectionProps {
  totalTonnes: number;
  totalValue: number;
  currency: Currency;
  ytdChangePct: number;
  volumePoints: Array<{ month: string; tonnes: number }>;
  maxVolume: number;
  isLoading: boolean;
}

export const FreightVolumeSection = memo(function FreightVolumeSection({
  totalTonnes,
  totalValue,
  currency,
  ytdChangePct,
  volumePoints,
  maxVolume,
  isLoading,
}: FreightVolumeSectionProps) {
  return (
    <Card className="h-full" padding={24}>
      <Text fz={17} fw={700} c="edr-text">
        Freight Volume
      </Text>
      <Group gap={10} align="baseline" mt={4} mb={22}>
        {isLoading ? (
          <Skeleton height={32} width={180} radius="sm" />
        ) : (
          <>
            <Text fz={26} fw={800} c="edr-text">
              {totalTonnes.toLocaleString()} t
            </Text>
            <Text fz={13} c="edr-muted">
              {formatCurrency(totalValue, currency)}
            </Text>
            <Text fz={12} fw={700} c="edr-green.7">
              {formatPct(ytdChangePct)} YTD
            </Text>
          </>
        )}
      </Group>
      {isLoading ? (
        <Skeleton height={110} radius="md" />
      ) : volumePoints.length === 0 ? (
        <Box className="flex h-[110px] items-center">
          <Text fz={13} c="edr-muted">
            No freight volume yet.
          </Text>
        </Box>
      ) : (
        <Group align="flex-end" gap={10} className="h-[110px]">
          {volumePoints.map((point, i) => {
            const isLast = i === volumePoints.length - 1;
            return (
              <Box
                key={point.month}
                className="flex flex-1 flex-col items-center gap-2"
              >
                <Box
                  bg={isLast ? "edr-green" : "edr-soft"}
                  bd={isLast ? undefined : "1px solid edr-border"}
                  h={Math.round((point.tonnes / maxVolume) * 86)}
                  className="w-full rounded-t-md"
                />
                <Text fz={11} c="edr-muted">
                  {point.month}
                </Text>
              </Box>
            );
          })}
        </Group>
      )}
    </Card>
  );
});
