frontend/src/components/FeedbackCard.tsx

import React from 'react';

const FeedbackCard: React.FC = () => {
  return (
    <div className="mb-4 p-3 bg-green-900/30 rounded-lg border border-green-600/50">
      <div className="mb-2">
        <h3 className="text-sm font-semibold text-green-300">Help Us Improve</h3>
      </div>

      <div className="text-xs text-green-100 leading-relaxed">
        Your feedback is crucial for improving language coverage and model quality for low-resource languages.
        Please{' '}
        <a
          href="https://forms.gle/JZhFWsA36sg2DdtN9"
          target="_blank"
          rel="noopener noreferrer"
          className="text-green-300 hover:text-green-200 underline transition-colors"
        >
          provide feedback
        </a>
        {' '}to share your experiences, suggestions, and any issues you encounter.
      </div>
    </div>
  );
};

export default FeedbackCard;