import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/presentation/gen/assets.gen.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';
import 'package:krow/features/shifts/domain/shift_entity.dart';

class ShiftPlaceAndTimeWidget extends StatelessWidget {
  final ShiftEntity viewModel;

  const ShiftPlaceAndTimeWidget(this.viewModel, {super.key});

  @override
  Widget build(BuildContext context) {
    final timeFormat = DateFormat('MMMM d, h:mma', context.locale.languageCode);
    return Stack(
      children: [
        SizedBox(
          height: 28,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.only(top: 12.0),
                child: Container(
                  constraints: BoxConstraints(
                      minWidth: MediaQuery.of(context).size.width - 32),
                  child: IntrinsicWidth(
                    child: Row(
                      children: [
                        const Gap(16),
                        Assets.images.icons.location.svg(width: 16, height: 16),
                        const Gap(4),
                        Text(
                          viewModel.locationName,
                          style: AppTextStyles.bodySmallReg,
                        ),
                        const Spacer(),
                        const Gap(12),
                        Assets.images.icons.calendar.svg(width: 16, height: 16),
                        const Gap(4),
                        Text(
                          timeFormat.format(viewModel.startDate),
                          style: AppTextStyles.bodySmallReg,
                        ),
                        const Gap(16),
                      ],
                    ),
                  ),
                ),
              );
            },
          ),
        ),
        Positioned(
          right: 0,
          child: Container(
            height: 28,
            width: 20,
            decoration: BoxDecoration(
              color: Colors.red,
              gradient: LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                colors: [
                  AppColors.grayPrimaryFrame.withAlpha(50),
                  AppColors.grayPrimaryFrame.withAlpha(255),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}
