Duffer Derek

"use client";
import Image from "next/image";
import React, { useMemo } from "react";
import { useRouter } from "next/navigation";
import "./style.scss";

type PageLayoutProps = {
  title?: string;
  description?: string;
  coordinates?: string;
  icon?: string;
  unitType?: string;
  titleType?: string;
  /** Back navigation target when `icon` is set. Defaults to `/sites`. */
  backHref?: string;
  /** Optional markup between back control and title (e.g. device template icon). */
  headlineIcon?: React.ReactNode;
  /** Actions aligned with the headline row (e.g. kebab menu). */
  trailingActions?: React.ReactNode;
  children: React.ReactNode;
};

type CoordinatesProps = {
  coordinates: string;
};

const PageLayout = (props: PageLayoutProps) => {
  const {
    title,
    description,
    unitType,
    coordinates,
    icon,
    titleType,
    backHref = "/sites",
    headlineIcon,
    trailingActions,
    children,
  } = props;
  const router = useRouter();
  return (
    <div className="head-cover">
      <div className="heading-block-wrapper">
        {icon && (
          <span className="back-btn" onClick={() => router.push(backHref)}>
            <Image src={icon} width={24} height={24} alt="image" />
            Back
          </span>
        )}
        {headlineIcon ? <span className="headline-icon-slot">{headlineIcon}</span> : null}
        <h1>{title}</h1>
        {/* {description && <p className="description">{description}</p>} */}
        <div className="wrapper-list">
        {titleType && <p className="description titleType">{titleType}</p>}
        {unitType && <p className="text-[#666] text-[12px] font-400 leading-none">{unitType}</p>}
        </div>
        
        {coordinates && (
          <p className="text-[#666] text-[12px] font-400 leading-none">
            <Coordinates coordinates={coordinates} />
          </p>
        )}
        {trailingActions ? (
          <div className="heading-block-wrapper__actions">{trailingActions}</div>
        ) : null}
      </div>
      {children}
    </div>
  );
};

const Coordinates: React.FC<CoordinatesProps> = ({ coordinates }) => {
  const [lat, lng] = useMemo(
    () => coordinates.split("Lng").map((part) => part.trim()),
    [coordinates]
  );

  return (
    <span className="flex items-center coordinates">
      <span>{lat}</span>
      <span>Lng {lng}</span>
    </span>
  );
};

export default PageLayout;