Flutter Appointment Booking Card with Date and Time Slots

WDiv(
  className: 'flex flex-col gap-4 w-full max-w-sm p-5 rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
  children: [
    WDiv(
      className: 'flex flex-row items-center gap-3 w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-center w-12 h-12 rounded-2xl bg-gradient-to-br from-teal-400 to-emerald-600 dark:from-teal-500 dark:to-emerald-700',
          child: WText(
            'DR',
            className: 'text-sm font-bold text-white dark:text-white'
          ),
        ),
        WDiv(
          className: 'flex flex-col',
          children: [
            WText(
              'Dr. Elena Rossi',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Dermatology   .   in-person',
              className: 'text-xs text-gray-500 dark:text-gray-400'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center gap-1 px-2 py-1 rounded-lg bg-emerald-50 dark:bg-emerald-500/15',
      children: [
        WIcon(
          Icons.star,
          className: 'text-xs text-emerald-500 dark:text-emerald-400'
        ),
        WText(
          '4.9   .   320 reviews',
          className: 'text-xs font-medium text-emerald-700 dark:text-emerald-300'
        ),
      ],
    ),
    WText(
      'Select a date',
      className: 'text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500'
    ),
    WDiv(
      className: 'wrap gap-2 w-full',
      children: [
        WDiv(
          className: 'flex flex-col items-center w-16 py-2 rounded-xl border border-gray-200 dark:border-gray-700',
          children: [
            WText(
              'Mon',
              className: 'text-xs text-gray-500 dark:text-gray-400'
            ),
            WText(
              '12',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col items-center w-16 py-2 rounded-xl bg-indigo-600 dark:bg-indigo-500 shadow-lg',
          children: [
            WText(
              'Tue',
              className: 'text-xs text-indigo-100 dark:text-indigo-100'
            ),
            WText(
              '13',
              className: 'text-base font-bold text-white dark:text-white'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col items-center w-16 py-2 rounded-xl border border-gray-200 dark:border-gray-700',
          children: [
            WText(
              'Wed',
              className: 'text-xs text-gray-500 dark:text-gray-400'
            ),
            WText(
              '14',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col items-center w-16 py-2 rounded-xl border border-gray-200 dark:border-gray-700',
          children: [
            WText(
              'Thu',
              className: 'text-xs text-gray-500 dark:text-gray-400'
            ),
            WText(
              '15',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
          ],
        ),
      ],
    ),
    WText(
      'Available times',
      className: 'text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500'
    ),
    WDiv(
      className: 'wrap gap-2 w-full',
      children: [
        WDiv(
          className: 'px-4 py-2 rounded-xl border border-gray-200 dark:border-gray-700',
          child: WText(
            '9:00 AM',
            className: 'text-sm font-medium text-gray-700 dark:text-gray-200'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1 px-4 py-2 rounded-xl bg-indigo-600 dark:bg-indigo-500 shadow-lg',
          children: [
            WIcon(
              Icons.check,
              className: 'text-sm text-white dark:text-white'
            ),
            WText(
              '10:30 AM',
              className: 'text-sm font-semibold text-white dark:text-white'
            ),
          ],
        ),
        WDiv(
          className: 'px-4 py-2 rounded-xl bg-gray-100 dark:bg-gray-800',
          child: WText(
            '12:00 PM',
            className: 'text-sm font-medium line-through text-gray-400 dark:text-gray-600'
          ),
        ),
        WDiv(
          className: 'px-4 py-2 rounded-xl border border-gray-200 dark:border-gray-700',
          child: WText(
            '1:30 PM',
            className: 'text-sm font-medium text-gray-700 dark:text-gray-200'
          ),
        ),
        WDiv(
          className: 'px-4 py-2 rounded-xl border border-gray-200 dark:border-gray-700',
          child: WText(
            '3:00 PM',
            className: 'text-sm font-medium text-gray-700 dark:text-gray-200'
          ),
        ),
        WDiv(
          className: 'px-4 py-2 rounded-xl bg-gray-100 dark:bg-gray-800',
          child: WText(
            '4:30 PM',
            className: 'text-sm font-medium line-through text-gray-400 dark:text-gray-600'
          ),
        ),
      ],
    ),
    WButton(
      className: 'flex flex-row items-center justify-center gap-2 w-full py-3 rounded-2xl bg-indigo-600 dark:bg-indigo-500 shadow-lg',
      child: WDiv(
        className: 'flex flex-row items-center justify-center gap-2',
        children: [
          WIcon(
            Icons.calendar_today,
            className: 'text-base text-white dark:text-white'
          ),
          WText(
            'Confirm  .  Tue 13, 10:30 AM',
            className: 'text-sm font-semibold text-white dark:text-white'
          ),
        ],
      ),
    ),
  ],
)