import React from 'react';
import { CurrentView } from '../types';
import { SECTION_IDS, PRIVACY_POLICY_CONTENT } from '../constants';
import Button from './Button';
import { ArrowUturnLeftIcon } from './icons';

interface PrivacyPolicySectionProps {
  setCurrentView: (view: CurrentView) => void;
}

const PrivacyPolicySection: React.FC<PrivacyPolicySectionProps> = ({ setCurrentView }) => {
  const handleBackClick = () => {
    setCurrentView('main');
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <section 
      id={SECTION_IDS.privacyPolicyPage} 
      className="py-16 md:py-24 bg-white min-h-screen"
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <header className="mb-8 md:mb-12">
          <Button
            variant="outline"
            size="sm"
            onClick={handleBackClick}
            leftIcon={<ArrowUturnLeftIcon />}
            className="mb-6"
          >
            {PRIVACY_POLICY_CONTENT.backButtonText}
          </Button>
          <h1 className="font-quicksand text-3xl sm:text-4xl md:text-5xl font-bold text-slate-900">
            {PRIVACY_POLICY_CONTENT.title}
          </h1>
          <p className="mt-3 text-sm text-slate-500 font-inter">
            {PRIVACY_POLICY_CONTENT.lastUpdated}
          </p>
        </header>

        <article className="prose prose-lg max-w-none font-inter text-slate-700">
          {PRIVACY_POLICY_CONTENT.sections.map((section, index) => (
            <div key={index} className="mb-6">
              {section.heading && <h2 className="font-quicksand text-2xl font-semibold mt-0 mb-3 text-slate-700">{section.heading}</h2>}
              {typeof section.content === 'string' ? <p>{section.content}</p> : section.content}
            </div>
          ))}
        </article>
      </div>
    </section>
  );
};

export default PrivacyPolicySection;