import React from 'react';

export const SettingsSkeleton: React.FC = () => {
  return (
    <div className="space-y-6 animate-pulse">
      <div className="h-8 bg-slate-200 dark:bg-slate-700 rounded w-64"></div>
      <div className="grid grid-cols-12 gap-6">
        <div className="col-span-12 md:col-span-3">
          <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-4 space-y-2">
            {[1, 2, 3, 4].map(i => (
              <div key={i} className="h-12 bg-slate-200 dark:bg-slate-700 rounded"></div>
            ))}
          </div>
        </div>
        <div className="col-span-12 md:col-span-9">
          <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 space-y-4">
            <div className="h-6 bg-slate-200 dark:bg-slate-700 rounded w-48"></div>
            <div className="space-y-3">
              <div className="h-10 bg-slate-200 dark:bg-slate-700 rounded"></div>
              <div className="h-10 bg-slate-200 dark:bg-slate-700 rounded"></div>
              <div className="h-10 bg-slate-200 dark:bg-slate-700 rounded"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export const RoleCardSkeleton: React.FC = () => {
  return (
    <div className="border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden animate-pulse">
      <div className="bg-slate-100 dark:bg-slate-700 px-4 py-3 flex items-center justify-between">
        <div className="h-6 bg-slate-300 dark:bg-slate-600 rounded w-48"></div>
        <div className="h-6 bg-slate-300 dark:bg-slate-600 rounded w-24"></div>
      </div>
      <div className="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
        {[1, 2, 3, 4, 5, 6].map(i => (
          <div key={i} className="h-10 bg-slate-200 dark:bg-slate-700 rounded"></div>
        ))}
      </div>
    </div>
  );
};