content: import 'package:cryptocurrency_app/models/markets/pair/pair.dart';
  import 'package:cryptocurrency_app/provider/crypto_provider.dart';
  import 'package:cryptocurrency_app/ui/widgets/details/summary_section.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter_hooks/flutter_hooks.dart';
  import 'package:hooks_riverpod/hooks_riverpod.dart';
  import 'package:easy_localization/easy_localization.dart';
  import '../../../generated/locale_keys.g.dart';
  
  import 'ohlc_section.dart';
  import 'order_book_section.dart';
  import 'trades_section.dart';
  
  class DetailsWidget extends HookConsumerWidget {
    final Pair pair;
    const DetailsWidget({Key? key, required this.pair}) : super(key: key);
  
    @override
    Widget build(BuildContext context, WidgetRef ref) {
      final _controller = useTabController(initialLength: 4);
      final graph = ref.watch(graphDataProvider(pair));
      final summary = ref.watch(pairSummaryProvider(pair));
      final orderBook = ref.watch(pairOrderBookProvider(pair));
      final trades = ref.watch(tradesProvider(pair));
  
      return Container(
        child: Column(
          children: [
            TabBar(
              labelColor: Theme.of(context).focusColor,
              unselectedLabelColor: Theme.of(context).unselectedWidgetColor,
              unselectedLabelStyle: Theme.of(context).textTheme.headline4,
              labelStyle: Theme.of(context).textTheme.headline4,
              indicatorWeight: 4,
              indicatorSize: TabBarIndicatorSize.label,
              indicatorColor: Theme.of(context).focusColor,
              isScrollable: true,
              controller: _controller,
              tabs: [
                Container(
                    width: 100,
                    child: Tab(
                      text: LocaleKeys.summary.tr(),
                    )),
                Tab(
                  text: LocaleKeys.orderbook.tr(),
                ),
                Tab(text: LocaleKeys.trades.tr()),
                Tab(
                  text: LocaleKeys.ohlc.tr(),
                ),
              ],
            ),
            Container(
              height: 300,
              child: TabBarView(
                controller: _controller,
                children: [
                  summary.when(
                      data: (data) => SummarySection(data: data),
                      loading: () => Center(
                            child: CircularProgressIndicator(),
                          ),
                      error: (error, e) => Center(
                            child: Text(error.toString().tr()),
                          )),
                  orderBook.when(
                      data: (data) => OrderBookSection(data: data),
                      loading: () => Center(
                            child: CircularProgressIndicator(),
                          ),
                      error: (error, e) => Center(
                            child: Text(error.toString().tr()),
                          )),
                  trades.when(
                      data: (data) => TradesSection(data: data),
                      loading: () => Center(
                            child: CircularProgressIndicator(),
                          ),
                      error: (error, e) => Center(
                            child: Text(error.toString().tr()),
                          )),
                  graph.when(
                      data: (data) => OHLCSection(
                            data: data,
                          ),
                      loading: () => Center(
                            child: CircularProgressIndicator(),
                          ),
                      error: (error, e) => Center(
                            child: Text(error.toString().tr()),
                          )),
                ],
              ),
            ),
          ],
        ),
      );
    }
  }
  