import { defineWidgetConfig } from "@medusajs/admin-sdk"

type OrderWidgetProps = {
  data?: {
    metadata?: Record<string, unknown> | null
  } | null
}

const OrderNoteWidget = ({ data }: OrderWidgetProps) => {
  const note =
    typeof data?.metadata?.order_note === "string"
      ? String(data.metadata.order_note || "").trim()
      : ""

  if (!note) {
    return null
  }

  return (
    <section className="border-ui-border-base overflow-hidden rounded-lg border bg-white">
      <div className="border-ui-border-base border-b px-4 py-3">
        <p className="text-sm font-semibold">Note client</p>
      </div>
      <div className="px-4 py-3">
        <p className="whitespace-pre-wrap text-sm leading-6 text-ui-fg-base">{note}</p>
      </div>
    </section>
  )
}

export const config = defineWidgetConfig({
  zone: "order.details.side.after",
})

export default OrderNoteWidget