"use client";

import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { ShiftSales } from "@/components/medora/sales-reports";

const BY_HOUR = [
  { hour: 8, amount: 3420, count: 6 },
  { hour: 9, amount: 6180, count: 11 },
  { hour: 10, amount: 7950, count: 13 },
  { hour: 11, amount: 9210, count: 15 },
  { hour: 12, amount: 12640, count: 19 },
  { hour: 13, amount: 11030, count: 17 },
  { hour: 14, amount: 6870, count: 10 },
  { hour: 15, amount: 7720, count: 12 },
];

export function ShiftSalesSection() {
  return (
    <Section id="my-shift" title="My shift sales" description="PS-21: the cashier's own shift by payment method and by hour, reachable from the POS bar. Only their own sales, never the branch's.">
      <Example title="My shift" description="Kevin Mutua, Westlands Main, 20 Oct 2026">
        <ShiftSales
          cashier="Kevin Mutua"
          opened="08:00"
          byMethod={{ "M-Pesa": { amount: 38410, count: 61 }, Cash: { amount: 17260, count: 33 }, Card: { amount: 7350, count: 6 }, Credit: { amount: 2000, count: 3 } }}
          byHour={BY_HOUR}
        />
      </Example>
    </Section>
  );
}