Usage note

import { GlassWater } from "lucide-react"
import { cn } from "@/components/storekit/lib/cn"

/* A calm, bordered note for how to use a product. Numbered steps in mono,
   a short fine-print line at the foot. No shadow, no motion. */

const DEFAULT_STEPS = [
  "Add one scoop to 8 to 10 oz of cold water or your morning smoothie.",
  "Shake or stir for about ten seconds. It mixes clean, no clumps.",
  "Take it once a day, ideally with breakfast. Reseal the pouch to keep it fresh.",
]

export function PdpUsageNote({
  title = "How to use",
  steps = DEFAULT_STEPS,
  disclaimer = "Pregnant, nursing or on medication? Check with your doctor first.",
  icon,
  className,
}: {
  title?: string
  steps?: string[]
  disclaimer?: string
  icon?: React.ReactNode
  className?: string
}) {
  return (
    <aside data-sk-section="pdp" data-sk-variant="pdp-usage-note" className={cn("w-full rounded-sk-card border border-sk-line bg-sk-card p-5 sm:p-6", className)} aria-label={title}>
      <div className="flex items-center gap-3">
        <span className="grid h-9 w-9 shrink-0 place-items-center rounded-sk-btn bg-sk-surface text-sk-accent" aria-hidden>
          {icon ?? <GlassWater size={18} />}
        </span>
        <h3 className="font-sk-display text-base font-semibold tracking-[-0.02em] text-sk-ink">{title}</h3>
      </div>
      <ol className="mt-5 flex flex-col gap-4">
        {steps.map((s, i) => (
          <li key={i} className="flex gap-4">
            <span className="w-6 shrink-0 pt-px font-sk-mono text-[13px] tabular-nums text-sk-accent">{String(i + 1).padStart(2, "0")}</span>
            <span className="text-sm leading-[1.5] text-sk-ink">{s}</span>
          </li>
        ))}
      </ol>
      <p className="mt-5 border-t border-sk-line pt-4 font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted">{disclaimer}</p>
    </aside>
  )
}