src/components/PromptCard.tsx

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) {
  return (
    <div className="rounded-[22px] border border-white/10 bg-[rgba(20,18,14,0.78)] px-5 py-[18px] backdrop-blur-md">

      <div className="text-eyebrow mb-1.5 text-sage">

        {label} {String(step).padStart(2, '0')} of {String(totalSteps).padStart(2, '0')}

        {optional ? ' - optional' : ''}

      </div>

      <div className="font-serif text-[22px] leading-[1.2] text-white">

        {title}

      </div>

      {tip ? (

        <div className="mt-1.5 text-xs leading-[1.4] text-white/60">{tip}</div>

      ) : null}

    </div>
  );
}