import 'package:flutter/material.dart';

final Color _mainBlueColor = const Color(0xFF0033CC);
final Color _mainTextColor = const Color(0xFF1C1C1E);
final Color _subTextColor = const Color(0xFF6A717B);
final Color _pageBackgroundColor = const Color(0xFFF5F7F9);

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50.0,
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: const [
          BoxShadow(
            color: Color.fromRGBO(0, 0, 0, 0.07),
            offset: Offset(0, 4),
            blurRadius: 6,
          ),
        ],
      ),
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Container(
                width: 18,
                height: 18,
                decoration: BoxDecoration(
                  color: _mainBlueColor,
                  shape: BoxShape.circle,
                ),
              ),
              const SizedBox(width: 10),
              Text(
                '스마트 헬멧 보관함',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.w500,
                  color: _mainTextColor,
                  letterSpacing: 0.5,
                ),
              ),
            ],
          ),
          Text(
            '2025/09/26 - 10:44 AM',
            style: TextStyle(color: _subTextColor, fontSize: 11),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(const MaterialApp(home: ScrollableHeaderPage()));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _pageBackgroundColor,
      body: SingleChildScrollView(
        child: Column(
          children: [
            const CustomHeader(),
            for (int i = 0; i < 20; i++)
              Container(
                margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                height: 100,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: const [
                    BoxShadow(
                      color: Color.fromRGBO(0, 0, 0, 0.05),
                      blurRadius: 4,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: Center(
                  child: Text(
                    '컨텐츠 카드 ${i + 1}',
                    style: TextStyle(fontSize: 16, color: _mainTextColor),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}