'use client';

import { Breadcrumb } from '@/components/common/Breadcrumb';
import { useLanguage } from '@/contexts/LanguageContext';
import { SitePage } from '@/types';

interface GenericSitePageContentProps {
  page: SitePage;
}

export default function GenericSitePageContent({ page }: GenericSitePageContentProps) {
  const { t } = useLanguage();
  const content = t(page.contentAr, page.contentEn);

  return (
    <div className="min-h-screen bg-background">
      <section className="relative overflow-hidden border-b border-border/60 bg-gradient-to-br from-primary/5 via-background to-secondary/5">
        {page.heroImage ? (
          <div
            className="absolute inset-0 bg-cover bg-center opacity-15"
            style={{ backgroundImage: `url(${page.heroImage})` }}
          />
        ) : null}
        <div className="container relative z-10 mx-auto px-4 py-14">
          <div className="max-w-4xl">
            <h1 className="mb-4 text-4xl font-display font-bold text-foreground md:text-5xl">
              {t(page.titleAr, page.titleEn)}
            </h1>
            {content ? (
              <div
                className="prose prose-lg max-w-none text-muted-foreground prose-headings:text-foreground prose-p:text-muted-foreground prose-strong:text-foreground"
                dangerouslySetInnerHTML={{ __html: content }}
              />
            ) : null}
          </div>
        </div>
      </section>

      <div className="container mx-auto px-4 py-8">
        <div data-breadcrumb="local">
          <Breadcrumb
            items={[
              { label: { ar: 'الصفحات', en: 'Pages' } },
              { label: { ar: page.titleAr || page.slug, en: page.titleEn || page.slug } },
            ]}
          />
        </div>
      </div>
    </div>
  );
}