import React from 'react';
import { IonSkeletonText } from '@ionic/react';

const DashboardSkeleton: React.FC = () => {
  return (
    <div style={{ padding: '0' }}>
      {/* Top Greeting Row */}
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '16px 20px 12px',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <IonSkeletonText
            animated
            style={{ width: '48px', height: '48px', borderRadius: '50%' }}
          />
          <div>
            <IonSkeletonText
              animated
              style={{
                width: '120px',
                height: '18px',
                borderRadius: '4px',
                marginBottom: '8px',
              }}
            />
            <IonSkeletonText
              animated
              style={{ width: '80px', height: '14px', borderRadius: '4px' }}
            />
          </div>
        </div>
      </div>

      {/* Loved Ones Carousel */}
      <div
        style={{
          padding: '0 20px 6px',
          display: 'flex',
          gap: '12px',
          overflowX: 'hidden',
        }}
      >
        <div
          style={{
            backgroundColor: '#ffffff',
            borderRadius: '24px',
            padding: '16px',
            width: '292px',
            flexShrink: 0,
            display: 'flex',
            flexDirection: 'column',
            gap: '14px',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <IonSkeletonText
              animated
              style={{ width: '48px', height: '48px', borderRadius: '16px' }}
            />
            <div style={{ flex: 1 }}>
              <IonSkeletonText
                animated
                style={{
                  width: '100px',
                  height: '16px',
                  borderRadius: '4px',
                  marginBottom: '4px',
                }}
              />
              <IonSkeletonText
                animated
                style={{ width: '80px', height: '12px', borderRadius: '4px' }}
              />
            </div>
          </div>
          <IonSkeletonText
            animated
            style={{ width: '100%', height: '48px', borderRadius: '12px' }}
          />
          <IonSkeletonText
            animated
            style={{
              width: '100%',
              height: '48px',
              borderRadius: '999px',
              marginTop: 'auto',
            }}
          />
        </div>
        <div
          style={{
            backgroundColor: '#ffffff',
            borderRadius: '24px',
            padding: '16px',
            width: '292px',
            flexShrink: 0,
            display: 'flex',
            flexDirection: 'column',
            gap: '14px',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <IonSkeletonText
              animated
              style={{ width: '48px', height: '48px', borderRadius: '16px' }}
            />
            <div style={{ flex: 1 }}>
              <IonSkeletonText
                animated
                style={{
                  width: '100px',
                  height: '16px',
                  borderRadius: '4px',
                  marginBottom: '4px',
                }}
              />
              <IonSkeletonText
                animated
                style={{ width: '80px', height: '12px', borderRadius: '4px' }}
              />
            </div>
          </div>
          <IonSkeletonText
            animated
            style={{ width: '100%', height: '48px', borderRadius: '12px' }}
          />
          <IonSkeletonText
            animated
            style={{
              width: '100%',
              height: '48px',
              borderRadius: '999px',
              marginTop: 'auto',
            }}
          />
        </div>
      </div>

      {/* Quick Actions */}
      <div style={{ padding: '0 20px', margin: '20px 0' }}>
        <IonSkeletonText
          animated
          style={{
            width: '120px',
            height: '16px',
            borderRadius: '4px',
            marginBottom: '16px',
          }}
        />
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            gap: '12px',
          }}
        >
          {[1, 2, 3, 4].map((i) => (
            <div
              key={i}
              style={{
                backgroundColor: '#ffffff',
                borderRadius: '24px',
                padding: '16px',
                display: 'flex',
                alignItems: 'center',
                gap: '12px',
              }}
            >
              <IonSkeletonText
                animated
                style={{ width: '44px', height: '44px', borderRadius: '12px' }}
              />
              <IonSkeletonText
                animated
                style={{ width: '60px', height: '14px', borderRadius: '4px' }}
              />
            </div>
          ))}
        </div>
      </div>

      {/* Activity List */}
      <div style={{ padding: '0 20px', margin: '20px 0' }}>
        <IonSkeletonText
          animated
          style={{
            width: '100px',
            height: '16px',
            borderRadius: '4px',
            marginBottom: '16px',
          }}
        />
        <div
          style={{
            backgroundColor: '#ffffff',
            borderRadius: '24px',
            padding: '8px 0',
          }}
        >
          {[1, 2, 3].map((i) => (
            <div
              key={i}
              style={{
                display: 'flex',
                alignItems: 'center',
                padding: '14px 16px',
                gap: '12px',
              }}
            >
              <IonSkeletonText
                animated
                style={{ width: '40px', height: '40px', borderRadius: '12px' }}
              />
              <div style={{ flex: 1 }}>
                <IonSkeletonText
                  animated
                  style={{
                    width: '140px',
                    height: '14px',
                    borderRadius: '4px',
                    marginBottom: '6px',
                  }}
                />
                <IonSkeletonText
                  animated
                  style={{
                    width: '100px',
                    height: '12px',
                    borderRadius: '4px',
                  }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default DashboardSkeleton;