"use client";
import { PublicOrganizationView } from "@core/Models/Company.model";
import style from "./OrganizationHeader.module.css";
import { useNavigation } from "@core/app/hooks/goto";

export interface OrganizationHeaderProps {
    organization: PublicOrganizationView;
}

export default function OrganizationHeader(props: OrganizationHeaderProps) {
    const { organization } = props;
    const { goTo } = useNavigation();
    return (
        <div
            className={style.organizationHeader}
            onClick={() => goTo("/landing/org/" + organization.id)}
        >
            <div
                style={{
                    ...(organization.headerFile ? { backgroundImage: `url(${organization.headerFile})` } : {}),
                    backgroundColor: organization.headerColor || 'transparent',
                    backgroundSize: "cover",
                    backgroundRepeat: "no-repeat",
                    backgroundPosition: "center",
                    cursor: "pointer",
                }}
            >
                <h1
                    style={{
                        color: organization.headerFontColor,
                        textShadow: `2px 2px 2px ${organization.headerFontShadowColor}`,
                        textTransform: "capitalize",
                    }}
                >
                    {organization.name}
                </h1>
                <p
                    style={{
                        color: organization.headerFontColor,
                        textShadow: `2px 2px 2px ${organization.headerFontShadowColor}`,
                    }}
                >
                    {organization.description}
                </p>
            </div>
        </div>
    );
}
