export function AttributesTableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="flex gap-4">
          <div className="skeleton h-10 w-64" />
          <div className="skeleton h-10 w-32" />
        </div>
        <div className="skeleton h-10 w-32" />
      </div>
      <div className="rounded-lg border" style={{ borderColor: 'var(--color-border)' }}>
        <div className="p-4 space-y-3">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="flex gap-4">
              <div className="skeleton h-8 w-32" />
              <div className="skeleton h-8 w-40" />
              <div className="skeleton h-8 w-24" />
              <div className="skeleton h-8 w-20 ml-auto" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export function AttributeFormSkeleton() {
  return (
    <div className="p-6 space-y-6 rounded-lg" style={{
      background: 'var(--color-surface)',
      border: '1px solid var(--color-border)',
      borderRadius: 'var(--radius-card)',
      maxWidth: '900px',
      width: '100%',
    }}>
      <div className="flex gap-4 border-b" style={{ borderColor: 'var(--color-border)' }}>
        {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="skeleton h-10 w-24" />
        ))}
      </div>
      <div className="space-y-4">
        <div className="space-y-2">
          <div className="skeleton h-4 w-32" />
          <div className="skeleton h-10 w-full" />
        </div>
        <div className="space-y-2">
          <div className="skeleton h-4 w-32" />
          <div className="skeleton h-10 w-full" />
        </div>
      </div>
      <div className="flex gap-3 pt-4">
        <div className="skeleton h-10 w-32" />
        <div className="skeleton h-10 w-24" />
      </div>
    </div>
  );
}