playchoo-manager-nextjs/src/components/members/MemberCard.tsx

'use client';

import type { FacilityMember } from '@/src/types/facility-admin';
import RoleBadge from './RoleBadge';
import StatusBadge from './StatusBadge';

interface MemberCardProps {
  member: FacilityMember;
  onEdit: () => void;
  onDelete: () => void;
}

export default function MemberCard({ member, onEdit, onDelete }: MemberCardProps) {
  function formatDate(dateString: string): string {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    });
  }

  return (
    <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-200">
      <div className="flex items-start justify-between">
        {/* Member Info */}
        <div className="flex items-center gap-4 flex-1">
          {/* Avatar */}
          <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-500 rounded-full flex items-center justify-center text-white font-bold text-2xl flex-shrink-0">
            {member.display_name.charAt(0).toUpperCase()}
          </div>

          {/* Details */}
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1">
              <h3 className="text-lg font-bold text-gray-800">{member.display_name}</h3>
              <RoleBadge role={member.role} />
              <StatusBadge status={member.status} />
            </div>
            <div className="text-sm text-gray-600 mb-2">{member.email}</div>
            <div className="flex flex-wrap gap-3 text-xs text-gray-500">
              {member.plan_name && (
                <div>
                  <span className="font-medium">Plan:</span> {member.plan_name}
                </div>
              )}
              <div>
                <span className="font-medium">Joined:</span> {formatDate(member.starts_at)}
              </div>
              {member.ends_at && (
                <div>
                  <span className="font-medium">Ends:</span> {formatDate(member.ends_at)}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Actions */}
        <div className="flex gap-2 ml-4">
          <button
            onClick={onEdit}
            className="px-4 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 font-medium transition-colors text-sm"
          >
            Edit
          </button>
          <button
            onClick={onDelete}
            className="px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 font-medium transition-colors text-sm"
          >
            Remove
          </button>
        </div>
      </div>
    </div>
  );
}