blank layout

import { Typography, Skeleton } from "antd";
import { useMemo } from "react";
import { SiteCodeStatus } from "../../types/SiteCodeStatus";

const { Title, Text } = Typography;

/* -----------------------------
   Domain Model
------------------------------*/
export interface SiteCode {
  Id: number;
  Code: string;               // e.g. FSA01928
  Name: string;               // Orlando Field Office
  AgencyName: string;         // CUSTOMS AND BORDER PROTECTION
  Status: SiteCodeStatus;
}

/* -----------------------------
   Props
------------------------------*/
interface SiteHeaderProps {
  SiteCode?: SiteCode;
  loading?: boolean;
}

/* -----------------------------
   Badge Text (City Code)
------------------------------*/
function getCityCode(code?: string): string {
  if (!code) return "";

  const match = code.match(/[A-Z]{3}/);
  return match ? match[0] : code.slice(0, 3).toUpperCase();
}

/* -----------------------------
   Status → Color Mapping
   (Replace with your exact palette)
------------------------------*/
function getStatusColor(status: SiteCodeStatus): string {
  switch (status) {
    case SiteCodeStatus.PendingActive:
      return "#69c0ff"; // light blue (placeholder)
    case SiteCodeStatus.Active:
      return "#2f6f3e"; // green (placeholder)
    case SiteCodeStatus.PendingInactive:
      return "#d9d9d9"; // light gray (placeholder)
    case SiteCodeStatus.Inactive:
      return "#8c8c8c"; // gray (placeholder)
    default:
      return "#8c8c8c";
  }
}

/* -----------------------------
   Component
------------------------------*/
export default function SiteHeader({
  SiteCode,
  loading
}: SiteHeaderProps) {

  if (loading || !SiteCode) {
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 20,
          marginBottom: 24
        }}
      >
        <Skeleton.Input active style={{ width: 80, height: 72 }} />
        <div>
          <Skeleton.Input active style={{ width: 220 }} />
          <br />
          <Skeleton.Input active style={{ width: 260, marginTop: 8 }} />
          <br />
          <Skeleton.Input active style={{ width: 180, marginTop: 8 }} />
        </div>
      </div>
    );
  }

  const badgeText = useMemo(
    () => getCityCode(SiteCode.Code),
    [SiteCode.Code]
  );

  const badgeColor = getStatusColor(SiteCode.Status);

  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: 20,
        marginBottom: 24
      }}
    >
      {/* Square Badge */}
      <div
        style={{
          width: 72,
          height: 72,
          borderRadius: 12,
          backgroundColor: badgeColor,
          color: "white",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: 22,
          fontWeight: 600,
          letterSpacing: 1,
          transition: "background-color 200ms ease"
        }}
      >
        {badgeText}
      </div>

      {/* Text Block (3 Lines) */}
      <div style={{ display: "flex", flexDirection: "column" }}>
        {/* Line 1: Full Site Code */}
        <Title
          level={4}
          style={{
            margin: 0,
            lineHeight: 1.2
          }}
        >
          {SiteCode.Code}
        </Title>

        {/* Line 2: Site Name */}
        <Text
          style={{
            fontSize: 15,
            marginTop: 4
          }}
        >
          {SiteCode.Name}
        </Text>

        {/* Line 3: Agency */}
        <Text
          type="secondary"
          style={{
            fontSize: 13,
            marginTop: 4,
            letterSpacing: 0.5
          }}
        >
          {SiteCode.AgencyName}
        </Text>
      </div>
    </div>
  );
}