import React from 'react';

export const DashboardSkeleton: React.FC = () => (
  <div className="space-y-6 animate-pulse">
    {/* System Status Block Skeleton */}
    <div className="bg-[var(--bg-secondary)] rounded-lg p-6 border border-[var(--border-primary)]">
      <div className="h-6 w-48 bg-[var(--bg-tertiary)] rounded mb-4" />
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {[1, 2, 3, 4].map(i => (
          <div key={i} className="bg-[var(--bg-primary)] rounded-lg p-4">
            <div className="h-4 w-32 bg-[var(--bg-tertiary)] rounded mb-2" />
            <div className="h-8 w-16 bg-[var(--bg-tertiary)] rounded" />
          </div>
        ))}
      </div>
    </div>

    {/* Pending Purchases Skeleton */}
    <div className="bg-[var(--bg-secondary)] rounded-lg p-6 border border-[var(--border-primary)]">
      <div className="h-6 w-40 bg-[var(--bg-tertiary)] rounded mb-4" />
      <div className="space-y-3">
        {[1, 2, 3].map(i => (
          <div key={i} className="bg-[var(--bg-primary)] rounded-lg p-4 flex items-center justify-between">
            <div className="flex-1">
              <div className="h-5 w-48 bg-[var(--bg-tertiary)] rounded mb-2" />
              <div className="h-4 w-32 bg-[var(--bg-tertiary)] rounded" />
            </div>
            <div className="flex gap-2">
              <div className="h-10 w-20 bg-[var(--bg-tertiary)] rounded" />
              <div className="h-10 w-20 bg-[var(--bg-tertiary)] rounded" />
            </div>
          </div>
        ))}
      </div>
    </div>

    {/* Production Status Skeleton */}
    <div className="bg-[var(--bg-secondary)] rounded-lg p-6 border border-[var(--border-primary)]">
      <div className="h-6 w-44 bg-[var(--bg-tertiary)] rounded mb-4" />
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {[1, 2, 3].map(i => (
          <div key={i} className="bg-[var(--bg-primary)] rounded-lg p-4">
            <div className="h-4 w-36 bg-[var(--bg-tertiary)] rounded mb-3" />
            <div className="h-6 w-24 bg-[var(--bg-tertiary)] rounded mb-2" />
            <div className="h-4 w-28 bg-[var(--bg-tertiary)] rounded" />
          </div>
        ))}
      </div>
    </div>

    {/* Alerts Skeleton */}
    <div className="bg-[var(--bg-secondary)] rounded-lg p-6 border border-[var(--border-primary)]">
      <div className="h-6 w-32 bg-[var(--bg-tertiary)] rounded mb-4" />
      <div className="space-y-3">
        {[1, 2].map(i => (
          <div key={i} className="bg-[var(--bg-primary)] rounded-lg p-4 flex items-start gap-3">
            <div className="h-10 w-10 bg-[var(--bg-tertiary)] rounded-full flex-shrink-0" />
            <div className="flex-1">
              <div className="h-5 w-56 bg-[var(--bg-tertiary)] rounded mb-2" />
              <div className="h-4 w-full bg-[var(--bg-tertiary)] rounded mb-2" />
              <div className="h-4 w-3/4 bg-[var(--bg-tertiary)] rounded" />
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);
