import * as React from 'react';
import { TeamGrid as TeamGridComponent } from './TeamGrid';

export interface TeamMember {
  id: string;
  name: string;
  position: string;
  email?: string | null;
  phone?: string | null;
  image?: { url: string; alt?: string } | string | null;
  branch: string;
}

export interface TeamGridBlockProps {
  title?: string;
  department?: string;
  showContact?: boolean;
}

export const TeamGridBlock = async ({ title, department, showContact = true }: TeamGridBlockProps) => {
  // Static fallback since Payload CMS is removed
  const teamMembers: any[] = [];
  
  // Map docs to TeamGrid expected format
  const members = teamMembers.map((m: any) => ({
    id: m.id,
    name: m.name,
    position: m.role || m.position || '',
    branch: m.department || m.branch || 'e-tib',
    email: m.email,
    phone: m.phone,
    image: m.image,
  }));

  return (
    <div className="team-grid-block">
      {/* Passing data to the client component */}
      <TeamGridComponent members={members} />
    </div>
  );
};