import type { OrderChannel } from "@/lib/dashboard/mock-data";

type OrderBreakdownProps = {
  channels: OrderChannel[];
};

export function OrderBreakdown({ channels }: OrderBreakdownProps) {
  const totalOrders = channels.reduce((sum, channel) => sum + channel.count, 0);

  return (
    <section className="rounded-lg border border-neutral-40 bg-neutral-10 p-5">
      <div className="mb-5">
        <h2 className="heading-s text-neutral-100">Jenis Order</h2>
        <p className="text-m-regular text-neutral-80">
          Distribusi pesanan berdasarkan kanal
        </p>
      </div>

      <div className="mb-5 flex h-3 overflow-hidden rounded-full bg-neutral-20">
        {channels.map((channel) => (
          <div
            key={channel.label}
            className={channel.color}
            style={{ width: `${channel.percentage}%` }}
            title={`${channel.label}: ${channel.percentage}%`}
          />
        ))}
      </div>

      <div className="flex flex-col gap-3">
        {channels.map((channel) => (
          <div
            key={channel.label}
            className="flex items-center justify-between gap-3 rounded-lg bg-neutral-20 px-3 py-2.5"
          >
            <div className="flex items-center gap-2.5">
              <span className={`size-2.5 rounded-full ${channel.color}`} />
              <span className="text-m-regular text-neutral-100">{channel.label}</span>
            </div>
            <div className="text-right">
              <p className="text-m-medium text-neutral-100">{channel.count}</p>
              <p className="text-s-regular text-neutral-70">{channel.percentage}%</p>
            </div>
          </div>
        ))}
      </div>

      <p className="text-s-regular mt-4 text-neutral-70">
        Total {totalOrders.toLocaleString("id-ID")} pesanan tercatat
      </p>
    </section>
  );
}