"use client";

import React, { useState } from "react";
import styles from "../commonstyle/dattabale.module.css";

interface Props {
  totalClients?: number;
  onRefresh?: () => void;
  onInviteClick?: () => void;
  canInvite: boolean;
  roleLabel: string;
}

export default function ClientPortalHeader({
  totalClients,
  onRefresh,
  onInviteClick,
  canInvite,
  roleLabel,
}: Props) {
  return (
    <div className={styles.header}>
      <div className={styles.headerLeft}>
        <h1 className={styles.title}>Client Portal Management</h1>
        <p className={styles.subtitle}>
          Manage client access, invitations, and portal permissions
          {roleLabel && (
            <span
              style={{
                marginLeft: 8,
                padding: "2px 8px",
                fontSize: 11,
                fontWeight: 700,
                borderRadius: 6,
                background: "#ede9fe",
                color: "#6d28d9",
              }}
            >
              {roleLabel}
            </span>
          )}
          {totalClients != null && (
            <span
              style={{
                marginLeft: 8,
                padding: "2px 8px",
                fontSize: 11,
                fontWeight: 700,
                borderRadius: 6,
                background: "#dcfce7",
                color: "#166534",
              }}
            >
              {totalClients} total
            </span>
          )}
        </p>
      </div>
      <div className={styles.headerRight}>
        {canInvite && (
          <button className={styles.btnPrimary} onClick={onInviteClick}>
            ＋ Invite Client
          </button>
        )}
      </div>
    </div>
  );
}