src/components/PromptCard.tsx

import { cn } from '@/lib/utils';

type Props = {
  step: number;
  totalSteps: number;
  title: string;
  tip: string;
  label?: string;
  optional?: boolean;
};

export function PromptCard({ step, totalSteps, title, tip, label = 'Clip', optional }: Props) {
  const visibleTip = optional ? tip.replace(/^Optional\s*:\s*/i, '') : tip;

  return (
    <div
      className={cn(
        'rounded-[22px] border bg-[rgba(20,18,14,0.78)] px-5 py-[18px] backdrop-blur-md',
        optional ? 'border-sage/45 shadow-[0_0_0_1px_rgba(188,211,174,0.16)]' : 'border-white/10',
      )}
    >
      <div className="mb-2.5 flex items-center justify-between gap-3">
        <div className="text-eyebrow text-sage">
          {label} {String(step).padStart(2, '0')} of {String(totalSteps).padStart(2, '0')}
        </div>
        {optional ? (
          <div className="rounded-full bg-sage px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.18em] text-matcha-deep">
            Optional
          </div>
        ) : null}
      </div>
      <div className="font-serif text-[22px] leading-[1.2] text-white">
        {title}
      </div>
      {optional ? (
        <div className="mt-3 rounded-2xl border border-sage/20 bg-sage/10 px-3 py-2 text-xs font-semibold leading-[1.35] text-sage">
          Record this only if you want. You can skip it.
        </div>
      ) : null}
      {visibleTip ? (
        <div className="mt-2 text-xs leading-[1.4] text-white/60">{visibleTip}</div>
      ) : null}
    </div>
  );
}