import Image from "next/image";
import Link from "next/link";
import { PhoneIcon, ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
import { companyData } from "@/data/companyData";
import styles from "./qualityClaimSection.module.css";

interface QualityClaimSectionProps {
  heading: string;
  textLeft: string;
  textRight: string;
  image: string;
  imageAlt: string;
}

export default function QualityClaimSection({
  heading,
  textLeft,
  textRight,
  image,
  imageAlt,
}: QualityClaimSectionProps) {
  return (
    <section
      className={styles.qualityClaim}
      aria-labelledby="quality-claim-heading"
    >
      <div className={styles.inner}>
        <div className={styles.imageWrapper}>
          <Image
            src={image}
            alt={imageAlt}
            fill
            className={styles.image}
            sizes="(max-width: 1024px) 100vw, 320px"
          />
        </div>

        <div className={styles.content}>
          <h2 id="quality-claim-heading" className={styles.heading}>
            {heading}
          </h2>

          <div className={styles.textGrid}>
            <p className={styles.text}>{textLeft}</p>
            <p className={styles.text}>{textRight}</p>
          </div>

          <div className={styles.actions}>
            <a
              href={`tel:${companyData.contact.phone.value}`}
              className="btn btn--tertiary"
            >
                
              <span className="btn-icon" aria-hidden="true">
                <PhoneIcon size={18} weight="bold" />
              </span>
              {companyData.contact.phone.display}
            </a>
            <Link href="/kontakt" className="btn btn--filled">
              <span className="btn-icon animate" aria-hidden="true">
                <ArrowRightIcon size={18} weight="bold" />
              </span>
              Kostenloses Angebot sichern
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}