Pluck String: Strum

import { PluckString } from "@/components/ui/pluck-string";

// Standard tuning in tab order: thin and quick on top, thick and slow below.
const strings = [
  { note: "e", stiffness: 1500, damping: 7, width: 0.75 },
  { note: "B", stiffness: 1150, damping: 6, width: 1 },
  { note: "G", stiffness: 880, damping: 5, width: 1.25 },
  { note: "D", stiffness: 670, damping: 4.5, width: 1.5 },
  { note: "A", stiffness: 510, damping: 4, width: 1.75 },
  { note: "E", stiffness: 390, damping: 3.5, width: 2 },
];

export function PluckStringStrumDemo() {
  return (
    <div className="w-full max-w-xl rounded-2xl border border-zinc-200 bg-white p-6 shadow-xl shadow-zinc-900/5 sm:p-8 dark:border-zinc-800 dark:bg-zinc-950 dark:shadow-black/40">
      <div className="flex items-baseline justify-between">
        <p className="font-mono text-xs uppercase tracking-widest text-zinc-500">Standard tuning</p>
        <p className="font-mono text-xs text-zinc-400 dark:text-zinc-600">Strum down</p>
      </div>
      <div className="mt-6">
        {strings.map((string) => (
          <div key={string.note} className="flex items-center gap-4">
            <span className="w-3 font-mono text-xs text-zinc-500">{string.note}</span>
            <PluckString
              pull={12}
              stiffness={string.stiffness}
              damping={string.damping}
              strokeWidth={string.width}
              className="h-8 flex-1 text-zinc-300 dark:text-zinc-700"
              highlightClassName="text-amber-500 dark:text-amber-400"
            />
          </div>
        ))}
      </div>
    </div>
  );
}