import { Button, MarkdownRenderer, PhotoWithFallback } from '../elements';
import type { Service } from '../../types/api/service';

export interface ServiceDetailContentProps {
    service?: Service | null;
    /** Label above the title (e.g. "Why Balance Aesthetics") */
    sectionLabel?: string;
    /** CTA button text */
    ctaText?: string;
    /** CTA button href */
    ctaHref?: string;
    /** Fallback summary when service.summary is empty */
    defaultSummary?: string;
}

export const ServiceDetailContent = ({
    service,
    sectionLabel = "Why We're Different",
    ctaText = "Get started",
    ctaHref = "/contact",
    defaultSummary = "Professional treatment delivered with care and expertise.",
}: ServiceDetailContentProps) => {
    if (!service?.description_markdown) return null;

    const name = service.name || 'Service';
    const summary = service.summary || defaultSummary;
    const id = service.id ?? 0;

    return (
        <section className="flex flex-col gap-12 md:gap-16">
            <div className="mx-auto flex w-full max-w-container flex-col items-stretch justify-between gap-8 px-4 md:flex-row md:items-start md:px-8">
                <div className="flex max-w-3xl flex-col">
                    {sectionLabel && (
                        <span className="text-sm font-semibold text-brand-secondary md:text-md">
                            {sectionLabel}
                        </span>
                    )}
                    <h2 className="mt-3 font-display text-4xl font-normal text-fg-primary md:text-5xl">
                        {name}
                    </h2>
                    <p className="mt-4 font-body text-lg text-tertiary md:mt-5 md:text-xl">
                        {summary}
                    </p>
                </div>
                <Button size="xl" color="primary" href={ctaHref}>
                    {ctaText}
                </Button>
            </div>

            <div className="mx-auto grid w-full max-w-container grid-cols-1 gap-12 px-4 md:grid-cols-2 md:gap-16 md:px-8">
                <div className="prose md:prose-lg font-body">
                    <MarkdownRenderer content={service.description_markdown} />
                </div>

                <PhotoWithFallback
                    item={service}
                    fallbackId={id}
                    className="h-60 w-full object-cover md:h-[560px] rounded-lg"
                    alt={name}
                />
            </div>

            {service.pricing_info?.trim() && (
                <div className="mx-auto w-full max-w-container px-4 md:px-8 mt-4 flex justify-center">
                    <div className="rounded-xl border border-secondary bg-secondary/60 p-6 md:p-8 max-w-2xl w-full">
                        <h3 className="font-display text-xl font-normal text-fg-primary mb-2 text-center">
                            Pricing
                        </h3>
                        <div className="prose prose-lg font-body text-fg-primary max-w-none text-center [&>*]:text-center">
                            <MarkdownRenderer content={service.pricing_info} />
                        </div>
                    </div>
                </div>
            )}
        </section>
    );
};
