import React from 'react';
import { useTranslation } from 'react-i18next';
import Footer from '../../components/Footer';

interface DisplaySectionProps {
  onStartClick?: () => void;
}

const DisplaySection: React.FC<DisplaySectionProps> = ({ onStartClick }) => {
  const { t } = useTranslation();
  // YouTube Shorts 영상 ID들
  const videos = [
    { id: 1, videoId: 'M3iuPZ59X1I' },
    { id: 2, videoId: 'JxWQxELDHSs' },
    { id: 3, videoId: 'c2ZdwhaB7S4' },
  ];

  return (
    <div className="display-section">
      <div className="content-safe-area">
        {/* Main visual frames container */}
        <div className="display-frames">
          {videos.map((video, index) => (
            <div
              key={video.id}
              className={`display-frame ${index === 2 ? 'display-frame-hidden-mobile' : ''}`}
            >
              <iframe
                src={`https://www.youtube.com/embed/${video.videoId}?autoplay=1&mute=1&loop=1&playlist=${video.videoId}&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1`}
                title={`YouTube Shorts ${video.id}`}
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                className="display-video"
              />
            </div>
          ))}
        </div>

        {/* Action Button */}
        <button onClick={onStartClick} className="display-button">
          {t('landing.display.startButton')}
        </button>
      </div>
      <Footer />
    </div>
  );
};

export default DisplaySection;