import 'package:agrilink_vocpro/core/constant/app_theme.dart';
import 'package:flutter/material.dart';

class DataDisplayerWidget extends StatelessWidget {
  const DataDisplayerWidget({
    super.key,
    required this.title,
    required this.subtitle,
    required this.value,
    required this.icon,
    required this.color,
    this.iconColor = Colors.teal,
    this.textColor = Colors.black,
    required this.unit,
    this.onTap,
  });

  final String title;
  final String subtitle;
  final String value;
  final IconData icon;
  final Color color;
  final Color iconColor;
  final Color textColor;
  final String unit;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        onTap != null ? onTap!() : null;
      },
      style: ElevatedButton.styleFrom(
        backgroundColor: color,
        padding: const EdgeInsets.all(12), // Padding di dalam button
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16), // Bentuk sudut yang bundar
        ),
        elevation: 20, // Efek bayangan
        shadowColor: Colors.grey.withOpacity(0.2),
      ),
      child: SizedBox(
        height:
            MediaQuery.of(context).size.height * 0.2, // Mengatur tinggi button
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Icon(icon, color: iconColor, size: 32),
            const SizedBox(height: 8),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: AppTheme.labelMedium.copyWith(color: textColor),
                ),
                Text(
                  subtitle,
                  style: AppTheme.labelSmall
                      .copyWith(color: textColor.withOpacity(0.5)),
                ),
              ],
            ),
            const Spacer(),
            Row(
              children: [
                Text(
                  value,
                  style: AppTheme.headline1.copyWith(color: textColor),
                ),
                const SizedBox(width: 4),
                Text(unit,
                    style: AppTheme.titleMedium.copyWith(color: textColor)),
              ],
            ),
          ],
        ),
      ),
    );
  }
}