import 'package:flutter/material.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_spacing.dart';
import '../../../core/theme/app_typography.dart';

enum HomeTab { all, trending, newTab }

/// Tab row for home screen - matches Pencil tabRow
class HomeTabRow extends StatelessWidget {
  const HomeTabRow({
    super.key,
    required this.selectedTab,
    required this.onTabChanged,
  });

  final HomeTab selectedTab;
  final ValueChanged<HomeTab> onTabChanged;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 40,
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 4),
        child: Row(
          children: [
          _TabChip(
            label: 'All',
            isSelected: selectedTab == HomeTab.all,
            onTap: () => onTabChanged(HomeTab.all),
          ),
          const SizedBox(width: AppSpacing.md),
          _TabChip(
            label: 'Trending',
            isSelected: selectedTab == HomeTab.trending,
            onTap: () => onTabChanged(HomeTab.trending),
          ),
          const SizedBox(width: AppSpacing.md),
          _TabChip(
            label: 'New',
            isSelected: selectedTab == HomeTab.newTab,
            onTap: () => onTabChanged(HomeTab.newTab),
          ),
        ],
        ),
      ),
    );
  }
}

class _TabChip extends StatelessWidget {
  const _TabChip({
    required this.label,
    required this.isSelected,
    required this.onTap,
  });

  final String label;
  final bool isSelected;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        height: 32,
        padding: const EdgeInsets.symmetric(
          horizontal: 14,
          vertical: 6,
        ),
        decoration: BoxDecoration(
          color: isSelected ? AppColors.primary : AppColors.surfaceAlt,
          borderRadius: BorderRadius.circular(20),
          border: isSelected ? null : Border.all(color: AppColors.border),
          boxShadow: isSelected
              ? [
                  BoxShadow(
                    color: AppColors.primaryShadow.withValues(alpha: 0.19),
                    blurRadius: 4,
                    offset: const Offset(0, 2),
                  ),
                ]
              : null,
        ),
        child: Center(
          child: Text(
            label,
            style: AppTypography.bodySmall.copyWith(
              color: isSelected ? AppColors.surface : AppColors.textSecondary,
              fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
            ),
          ),
        ),
      ),
    );
  }
}