frontend/src/components/TipsNotice.tsx

import React from 'react';
import { TRANSCRIPTION_LIMITS } from '../utils/transcriptionWarnings';

const TipsNotice: React.FC = () => {
  return (
    <div className="mb-4 p-3 bg-blue-900/30 rounded-lg border border-blue-600/50">
      <div className="mb-2">
        <h3 className="text-sm font-semibold text-blue-300">For Best Results</h3>
      </div>

      <div className="text-xs text-blue-200 mb-3 space-y-1">
        <div>Duration: {TRANSCRIPTION_LIMITS.MIN_DURATION} seconds to {Math.floor(TRANSCRIPTION_LIMITS.MAX_DURATION / 60)} minutes</div>
        <div>File size: Under {TRANSCRIPTION_LIMITS.MAX_FILE_SIZE}MB</div>
        <div>Quality: Clear speech, minimal background noise</div>
      </div>

      <div className="text-xs text-blue-300/70 italic">
        Too short: insufficient context for model accuracy<br/>
        Too long/large: may exceed server resources
      </div>
    </div>
  );
};

export default TipsNotice;