import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 0,
      length: 5,
      child: Scaffold(
        appBar: AppBar(
          title:
              Text("특별 혜택 모아보기", style: TextStyle(fontWeight: FontWeight.bold)),
          leading: Icon(Icons.arrow_back),
          actions: [
            Icon(CupertinoIcons.home),
            SizedBox(width: 16),
          ],
          bottom: TabBar(
            labelPadding: EdgeInsets.symmetric(horizontal: 0),
            tabs: [
              Tab(text: "전체"),
              Tab(text: "쇼핑뉴스"),
              Tab(text: "사은"),
              Tab(text: "쿠폰"),
              Tab(text: "문화/이벤트"),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            FirstPage(),
            Center(child: Text("쇼핑뉴스")),
            Center(child: Text("사은")),
            Center(child: Text("쿠폰")),
            Center(child: Text("문화/이벤트")),
          ],
        ),
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: ListView.builder(
        itemCount: 20,
        itemBuilder: (context, index) {
          return ListItem(index);
        },
      ),
    );
  }
}

class ListItem extends StatelessWidget {
  int id;

  ListItem(this.id);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10),
      child: Row(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Image.network(
              "<https://picsum.photos/id/$>{id + 230}/100/100",
              fit: BoxFit.cover,
              errorBuilder: (context, error, stackTrace) => Container(width: 100,height: 100,color: Colors.grey[300]),
            ),
          ),
          SizedBox(width: 10),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  child: Padding(
                    padding:
                        const EdgeInsets.symmetric(vertical: 3, horizontal: 6),
                    child: Text("쇼핑뉴스", style: TextStyle(fontSize: 10)),
                  ),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.grey[300],
                  ),
                ),
                SizedBox(height: 3),
                Text(
                  "AVENUEL Only 바샤커피 청담 오픈 온라인 헤택",
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 3),
                Text("온라인",
                    style:
                        TextStyle(fontSize: 10, fontWeight: FontWeight.bold)),
                Text("7.31(수)~8.11(일)",
                    style: TextStyle(fontSize: 10, color: Colors.grey)),
              ],
            ),
          )
        ],
      ),
    );
  }
}