import 'package:flutter/material.dart';

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

  List<Widget> _largeScreenLayout() {
     return const [
      SizedBox(
        width: 100,
        child: Text('Date')
      ),
      Expanded(
        child: Text('Description')
      ),
      SizedBox(
        width: 100,
        child: Text('Account'),
      ),
      SizedBox(
        width: 120,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Text('Amount'),
            Text('SubTotal'),
          ],
        ),
      )
    ];
  }

  List<Widget> _smallScreenLayout() {
    return const [
      SizedBox(
        width: 100,
        child: Text('Date')
      ),
      Expanded(
        child: Text('Description')
      ),
      SizedBox(
        width: 120,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Text('Amount'),
            Text('SubTotal'),
          ],
        ),
      )
    ];
  }

  @override
  Widget build(BuildContext context) {
    bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 10),
      margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
      decoration: const BoxDecoration(
        border: Border(bottom: BorderSide(color: Colors.black))
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: smallVerticalScreen ? _smallScreenLayout() : _largeScreenLayout(),
      ),
    );
  }
}