import 'package:flutter/material.dart';
import 'package:markdown_widget/markdown_widget.dart';
import 'package:skeletonizer/skeletonizer.dart';

import '../../../api/dto/article_detail_dto.dart';
import '../../../api/endpoints/skin_api.dart';

class EducationDetailPage extends StatefulWidget {
  final String id;

  const EducationDetailPage({super.key, required this.id});

  @override
  State<EducationDetailPage> createState() => _EducationDetailPageState();
}

class _EducationDetailPageState extends State<EducationDetailPage> {
  ArticleDetailDto? _detailDto;
  bool _loading = true;

  @override
  void initState() {
    super.initState();
    _init();
  }

  void _init() async {
    var res = await articleDetailApi(widget.id);
    setState(() {
      _detailDto = res;
      _loading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_detailDto?.title ?? ""),
      ),
      body: Skeletonizer(
        enabled: _loading,
        child: _loading
            ? ListView.builder(
          padding: EdgeInsets.all(15),
                itemBuilder: (context, index) {
                  return Container(
                    margin: EdgeInsets.symmetric(vertical: 6),
                    height: 14,
                    width: double.infinity,
                    color: Colors.grey[300],
                  );
                },
                itemCount: 10,
              )
            : MarkdownWidget(
                padding: EdgeInsets.all(15),
                data: _detailDto?.content ?? "",
              ),
      ),
    );
  }
}