import Header from './Header';
import Footer from './Footer';
import { getLanguage, translations } from '../i18n';

interface Feature {
  title: string;
  description: string;
}

interface ProductPageProps {
  title: string;
  description: string;
  icon: string;
  trademark?: string;
  features?: Feature[];
  children?: React.ReactNode;
}

function ProductPage({ title, description, icon, trademark, features, children }: ProductPageProps) {
  const lang = getLanguage();
  const t = translations[lang].common;

  return (
    <>
      <Header />
      <main>
        <div className="hero" style={{ padding: '6rem 0' }}>
          <div className="container">
            <span className="material-icons" style={{ fontSize: '4rem', marginBottom: '1.5rem', color: 'var(--accent-color)' }}>{icon}</span>
            <h1>{title}</h1>
            <p style={{ maxWidth: '800px', margin: '0 auto' }}>{description}</p>
          </div>
        </div>
        
        <section className="section">
          <div className="container">
            {features ? (
              <div style={{ marginBottom: '4rem' }}>
                <h2 style={{ display: 'block', marginBottom: '4rem' }}>{t.detailsTitle}</h2>
                <div className="about-grid">
                  {features.map((f, i) => (
                    <div key={i} className="feature-card" style={{ 
                      padding: '3rem 2rem', 
                      borderRadius: '12px', 
                      border: '1px solid var(--border-color)',
                      backgroundColor: 'var(--bg-white)',
                      textAlign: 'left',
                      boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
                      flex: '1 1 350px'
                    }}>
                      <h3 style={{ color: 'var(--primary-color)', marginBottom: '1.5rem', fontSize: '1.5rem', textAlign: 'left' }}>{f.title}</h3>
                      <p style={{ fontSize: '1.1rem', lineHeight: '1.7', color: 'var(--text-secondary)', textAlign: 'left' }}>{f.description}</p>
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              <div className="product-details-grid">
                <div>
                  <h2>{t.detailsTitle}</h2>
                  <p style={{ textAlign: 'left' }}>{t.detailsText}</p>
                  <ul style={{ listStyle: 'none', marginTop: '2rem' }}>
                    <li style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
                      <span className="material-icons" style={{ color: 'var(--accent-color)' }}>check_circle</span>
                      {t.featureSecurity}
                    </li>
                    <li style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
                      <span className="material-icons" style={{ color: 'var(--accent-color)' }}>check_circle</span>
                      {t.featureIntegration}
                    </li>
                    <li style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
                      <span className="material-icons" style={{ color: 'var(--accent-color)' }}>check_circle</span>
                      {t.featureSupport}
                    </li>
                  </ul>
                </div>
                <div style={{ 
                  backgroundColor: 'var(--bg-light)', 
                  height: '400px', 
                  borderRadius: '8px', 
                  border: '1px solid var(--border-color)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'column',
                  color: 'var(--text-secondary)'
                }}>
                  <span className="material-icons" style={{ fontSize: '5rem', marginBottom: '1rem', opacity: 0.3 }}>image</span>
                  <p>{t.screenshotPlaceholder}</p>
                </div>
              </div>
            )}
            
            {children}

            {trademark && (
              <p style={{ fontSize: '0.8rem', fontStyle: 'italic', marginTop: '6rem', opacity: 0.7, textAlign: 'left' }}>
                {trademark}
              </p>
            )}
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

export default ProductPage;