import type { FC } from "react";
import { ArrowRight } from "@untitledui/icons";
import { Button } from '../elements';
import { FeatureTextFeaturedIconCard } from './feature-text';
import { mapIcon } from '../utils/icon-mapping';
import type { CompanyInformation } from '../../types/api/company-information';
import type { WebsitePhotos } from '../../types/api/website-photos';

interface Value {
    id?: string;
    title: string;
    description: string;
    icon: string | FC<{ className?: string }>;
    href?: string;
}

interface AboutHomeProps {
    companyInformation?: CompanyInformation | null;
    websitePhotos?: WebsitePhotos | null;
    title?: string;
    subtitle?: string;
    values?: Value[];
    ctaText?: string;
}


export const AboutHome = ({
    companyInformation,
    title = "",
    subtitle = "",
    values = [],
    ctaText = "",
}: AboutHomeProps) => {
    const description = companyInformation?.about_text_markdown || '';
    
    const firstValue = values && values.length > 0 ? values[0] : null;

    return (
        <section className="bg-primary py-16 md:py-24">
            <div className="mx-auto w-full max-w-container px-4 md:px-8">
                <div className="grid grid-cols-1 gap-12 md:gap-16 lg:grid-cols-3">
                    {/* Left column */}
                    <div className="max-w-3xl lg:col-span-1">
                        {firstValue?.icon && (() => {
                            const IconComponent = mapIcon(firstValue.icon);
                            return IconComponent ? (
                                <>
                                    <div className="hidden md:flex">
                                        <IconComponent className="size-14 text-brand-secondary" />
                                    </div>
                                    <div className="flex md:hidden">
                                        <IconComponent className="size-12 text-brand-secondary" />
                                    </div>
                                </>
                            ) : null;
                        })()}
                        <h2 className="mt-5 text-display-sm font-semibold text-primary md:text-display-md">
                            {title}
                        </h2>
                        <p className="mt-4 text-lg text-tertiary md:mt-5">
                            {description || subtitle}
                        </p>
                        {ctaText && (
                            <Button
                                href="/about"
                                color="link-color"
                                size="lg"
                                className="mt-8"
                                iconTrailing={ArrowRight}
                            >
                                {ctaText}
                            </Button>
                        )}
                    </div>

                    {/* Right column - Feature cards */}
                    {values && values.length > 0 && (
                        <div className="lg:col-span-2">
                            <ul className="grid w-full grid-cols-1 gap-x-8 gap-y-6 sm:grid-flow-col sm:grid-cols-2 sm:grid-rows-2 md:gap-y-8 lg:grid-cols-2">
                                {values.map((value: Value, index: number) => {
                                    if (!value.icon) return null;
                                    const IconComponent = mapIcon(value.icon);
                                    if (!IconComponent) return null;
                                    
                                    return (
                                        <li key={value.id || index}>
                                            <FeatureTextFeaturedIconCard
                                                icon={IconComponent}
                                                title={value.title}
                                                subtitle={value.description}
                                                footer={
                                                    value.href ? (
                                                        <Button 
                                                            color="link-color" 
                                                            size="lg" 
                                                            href={value.href}
                                                            iconTrailing={ArrowRight}
                                                        >
                                                            Learn more
                                                        </Button>
                                                    ) : undefined
                                                }
                                            />
                                        </li>
                                    );
                                })}
                            </ul>
                        </div>
                    )}
                </div>
            </div>
        </section>
    );
};
