syncrow-web/lib/pages/spaces_management/widgets/space_container_widget.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class SpaceContainerWidget extends StatelessWidget {
  final int index;
  final String icon;
  final String name;
  final VoidCallback? onDoubleTap;
  final VoidCallback? onTap;

  const SpaceContainerWidget({
    super.key,
    required this.index,
    required this.icon,
    required this.name,
    this.onTap,
    this.onDoubleTap,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return GestureDetector(
      onDoubleTap: onDoubleTap,
      onTap: onTap,
      child: Container(
        width: 150,
        height: 60,
        decoration: _containerDecoration(),
        child: Row(
          children: [
            _buildIconContainer(),
            const SizedBox(width: 10),
            Expanded(
              child: Text(
                name,
                style: theme.textTheme.bodyLarge?.copyWith(
                  fontWeight: FontWeight.bold,
                  color: ColorsManager.blackColor,
                ),
                overflow: TextOverflow.ellipsis, // Handle long names gracefully
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// Builds the icon container with the SVG asset.
  Widget _buildIconContainer() {
    return Container(
      width: 40,
      height: double.infinity,
      decoration: const BoxDecoration(
        color: ColorsManager.spaceColor,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(15),
          bottomLeft: Radius.circular(15),
        ),
      ),
      child: Center(
        child: SvgPicture.asset(
          icon,
          color: ColorsManager.whiteColors,
          width: 24,
          height: 24,
        ),
      ),
    );
  }

  BoxDecoration _containerDecoration() {
    return BoxDecoration(
      color: ColorsManager.whiteColors,
      borderRadius: BorderRadius.circular(15),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.5),
          spreadRadius: 2,
          blurRadius: 5,
          offset: const Offset(0, 3), // Shadow position
        ),
      ],
    );
  }
}