import Image from 'next/image';
import { Service } from '@/lib/types';
import LayoutContainer from '@/components/layout/LayoutContainer';
import InstagramLink from '@/components/ui/InstagramLink';
import styles from './ServiceDetails.module.css';

interface ServiceDetailsProps {
  service: Service;
}

export default function ServiceDetails({ service }: ServiceDetailsProps) {
  return (
    <div className={styles.servicePage}>
      <div className={styles.hero}>
        <Image
          src={service.coverImage}
          alt={service.title}
          fill
          className={styles.heroImage}
          priority
          sizes="100vw"
        />
        <div className={styles.heroOverlay} />
        <div className={styles.heroContent}>
          <h1 className={styles.heroTitle}>{service.title}</h1>
        </div>
      </div>

      <LayoutContainer>
        <div className={styles.content}>
          <p className={styles.description}>{service.description}</p>

          {service.examples.length > 0 && (
            <section className={styles.examples}>
              <h2 className={styles.examplesTitle}>Примеры работ</h2>
              <div className={styles.examplesGrid}>
                {service.examples.map((example, index) => (
                  <div key={index} className={styles.exampleItem}>
                    <Image
                      src={example}
                      alt={`Пример работы ${index + 1}`}
                      fill
                      className={styles.exampleImage}
                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                      loading="lazy"
                    />
                  </div>
                ))}
              </div>
            </section>
          )}

          <div className={styles.cta}>
            <InstagramLink>Связаться в Instagram</InstagramLink>
          </div>
        </div>
      </LayoutContainer>
    </div>
  );
}

