import React from 'react';
import { motion } from 'framer-motion';
import { Flag, Globe, Info, MapPin, CheckCircle, PenLine, User } from 'lucide-react';

const ExampleCard = ({ example, index = 0 }) => {
  const cardVariants = {
    hidden: { opacity: 0, y: 10 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.3,
        delay: index * 0.05,
      },
    },
  };

  const StatusIcon = example.status === 'verified' ? CheckCircle : PenLine;
  
  // Detect if this is a Chinese-to-English example (no taiwan field or isChineseToEnglish flag)
  const isChineseToEnglish = example.isChineseToEnglish || !example.taiwan;

  return (
    <motion.div
      className="example-card"
      variants={cardVariants}
      initial="visible"
      animate="visible"
      whileHover={{ scale: 1.02 }}
    >
      <div className="example-header">
        <div className="example-header-left">
          <span className="example-brand">{example.brand}</span>
          <span className="example-category">{example.category}</span>
        </div>
        <div className="example-header-right">
          {example.contributor && (
            <div className="contributor" title={`Added by ${example.contributor}`}>
              <User size={14} />
              <span>{example.contributor}</span>
            </div>
          )}
          <StatusIcon 
            size={16} 
            className={example.status === 'verified' ? 'status-verified' : 'status-pending'}
            title={example.status === 'verified' ? 'Verified Example' : 'Pending Review'}
          />
        </div>
      </div>

      {isChineseToEnglish ? (
        <>
          {/* Chinese to English layout */}
          <div className="language-section">
            <div className="language-label">
              <Flag size={16} />
              Chinese (Original)
            </div>
            <div className="language-text chinese-text">
              {example.mainland}
            </div>
          </div>

          <div className="language-section">
            <div className="language-label">
              <Globe size={16} />
              English Translation
            </div>
            <div className="language-text">
              {example.english}
            </div>
          </div>
        </>
      ) : (
        <>
          {/* English to Chinese layout */}
          <div className="language-section">
            <div className="language-label">
              <Flag size={16} />
              English (Original)
            </div>
            <div className="language-text">
              {example.english}
            </div>
          </div>

          <div className="language-section">
            <div className="language-label">
              <MapPin size={16} />
              <span>Mainland China</span>
            </div>
            <div className="language-text chinese-text">
              {example.mainland}
            </div>
          </div>

          <div className="language-section">
            <div className="language-label">
              <Globe size={16} />
              <span>Taiwan</span>
            </div>
            <div className="language-text chinese-text">
              {example.taiwan}
            </div>
          </div>
        </>
      )}

      {example.description && (
        <div className="example-description">
          <div className="language-label">
            <Info size={16} />
            Description
          </div>
          {example.description}
        </div>
      )}

      <style jsx>{`
        .example-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1.5rem;
        }

        .example-header-left {
          display: flex;
          align-items: center;
          gap: 0.75rem;
        }

        .example-header-right {
          display: flex;
          align-items: center;
          gap: 1rem;
        }

        .contributor {
          display: flex;
          align-items: center;
          gap: 0.25rem;
          font-size: 0.85rem;
          color: #666;
        }

        .status-verified {
          color: #10b981;
        }

        .status-pending {
          color: #6b7280;
        }
      `}</style>
    </motion.div>
  );
};

export default ExampleCard;