import 'package:flutter/material.dart';
import 'package:tm_app/core/theme/colors.dart';
import 'package:tm_app/core/utils/size_config.dart';

class MembersTab extends StatelessWidget {
  const MembersTab({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(height: 36.0.h()),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            _columnName('Full Name'),
            _columnName('Position'),
            _columnName('Access level'),
          ],
        ),
        SizedBox(height: 24.0.h()),
        Divider(color: AppColors.grey50),
        SizedBox(height: 24.0.h()),
        Expanded(
          child: ListView.separated(
            scrollDirection: Axis.vertical,
            itemBuilder: (context, index) {
              final member = _members[index];
              return _member(
                fullName: member.fullName,
                position: member.position,
                accessLevel: member.accessLevel,
              );
            },
            separatorBuilder:
                (context, index) =>
                    Divider(color: AppColors.grey50.withValues(alpha: 0.2)),
            itemCount: _members.length,
          ),
        ),
      ],
    );
  }

  Widget _columnName(String text) {
    return SizedBox(
      width: 100.0.w(),
      child: Text(
        text,
        style: TextStyle(
          fontSize: 16.0.sp(),
          fontWeight: FontWeight.w400,
          color: AppColors.grey70,
        ),
      ),
    );
  }

  Widget _member({
    required String fullName,
    required String position,
    required String accessLevel,
  }) {
    return SizedBox(
      height: 43.0.h(),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          _memberDetail(title: fullName),
          // SizedBox(width: 40.0.w()),
          _memberDetail(title: position),
          // SizedBox(width: 40.0.w()),
          _memberDetail(title: accessLevel),
        ],
      ),
    );
  }

  Widget _memberDetail({required String title}) {
    return SizedBox(
      width: 100.0.w(),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Text(
          title,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,

          style: TextStyle(
            fontSize: 16.0.sp(),
            fontWeight: FontWeight.w400,
            color: AppColors.grey80,
          ),
        ),
      ),
    );
  }
}

class Member {
  final String fullName;
  final String position;
  final String accessLevel;

  Member({
    required this.fullName,
    required this.position,
    required this.accessLevel,
  });
}

final List<Member> _members = [
  Member(fullName: 'Rick Novak', position: 'Director', accessLevel: 'Level 01'),
  Member(fullName: 'Sara Novak', position: 'Director', accessLevel: 'Level 01'),
  Member(fullName: 'Sarah Connor', position: 'Chief', accessLevel: 'Level 02'),
];